State management

Component oriented UI simplifies development and reuse. As components become smaller and smaller, communication between them becomes more complex.

One way of handling state is to simply pull the state up in the tree. If two components need to share information or affect one another, the correct placement for the state is in the common ancestor. Sometimes, state will be kept in the root node - the App itself. Which is ok since some data really is global.

Example - Movies List

In the previous assignment three different components need to talk to each other:

• AddMovieBox
• MoviesList
• FilterBox

Adding a new movie should update the list of movies and it should reset the currently set filter. Filtering affects which movies are rendered in our list.

So, the filter itself cannot be a part of the FilterBox component, it should be moved up - into our App component. Also, adding movies is done in the same level.

This simplifies our leaf components and removes state from them. It is best that the leaf nodes only use props while the components closer to the root contain the state