State, events and lifting state up

State is data that changes over time and should update the screen. You hold it with React's useState hook. Calling the setter asks React to draw the component again with the new value.

It does not change the variable in the current render, which is why logging right after setCount still shows the old value. Never change an object or array in state directly. Create a new one with spread (...), map or filter instead.

When two components need the same data, move the state up to their closest shared parent. Pass the value down, plus a function that changes it. This is called lifting state up.

Work out values instead of storing them: a filtered list made from the items and a search term needs no state of its own. Most React bugs come from state in the wrong place, or the same data stored twice.