Organizing state in React components

JavaScript
1

Hi, I have a question about organizing React component and specifically state. When should a component have state?

Say I have a Movie website that has 4 components:

  1. APP component with state (an array holding list of movies)
  2. SEARCH component which updates state in the APP component
  3. MOVIES component which holds individual MOVIE components
  4. MOVIE components which render individual movies

Currently only the APP component has state and passes it down to MOVIES as props which passes it down to individual MOVIE components as props.

react
react960×540 6.76 KB

So obviously it works but it gets a little confusing as methods on APP are being called for everything as that is where the state is. Should MOVIES have its own state holding the movie data? Should each MOVIE components have its own state? When should a component have state?

2

For smaller app,

it’s better for the parent component or app component to hold the state. It makes it intuitive to check the app component for state and not anywhere which can cause confusion and disorganization.

Once the app grows larger, I would introduce Redux. At this point, you don’t worry about storing state into components, because your app’s state is stored inside of a store which is decoupled from components.

1 Like