How to Manage State in React.js?

96% of state you need to manage is either data fetched from an API or local data only ~1 component needs or to communication componet with each other.

data fetched from an API

You can store/handle this data using something like redux + redux-thunk which will give you a lot of flexibility, but I prefer using a library specifically for data fetching to streamline the process. In the GraphQL space, this means something like Apollo, URQL, or Relay. For REST, react-query or swr.

local data only ~1 component needs

If only 1 component needs the data, handle the state directly on the component with useState or useReducer which is built into React (I occasionally also like to use https://github.com/immerjs/use-immer). Doing so will colocate your state and make it very easy to reason about which component is responsible for which state.

I recommend you start with that approach for almost every component you create then modify it slightly when other components need the state.

1-If a child component needs the state, just pass it as a prop


return (
  <div>
    {/* passing state down to child component */}
    <SomeButton open={open} setOpen={setOpen}>
  </div>
)```



2-If a sibling or parent component needs the state, lift up the state to the parent




```// parent component
const [open, setOpen] = useState(false)

return (
  <div>
    {/* passing state down to sibling components */}
    <SomeButton open={open} setOpen={setOpen}>
    <RecipeModal open={open} setOpen={setOpen} />
  </div>
)```


### Won’t I be passing down props a lot (aka prop drilling)?
Most of the time, no. A lot of state is pretty flat and you won’t be passing props very deep. If you’re passing state down more than 2 levels that’s usually an indicator you should do something else. Either you should flatten your component structure or your state doesn’t fit into this category and you should follow the next section.



For situations like this where it’s not feasible to pass down the state through props to each component that needs it, I like using React’s built-in Context or a state management library or some time may be used mobx.

#react #javascript #mobx #redux #usestate