Lifting State Up

If two children need the same data, put that state in the closest shared parent.

Pass the value down as props. Pass a setter down so a child can ask for a change.

That is lifting state up.

A shared score

Display cannot change score. Plus cannot see score. App owns it. Both stay simple.

Name callbacks after what happened

onAdd, onChange, onSelect. The parent decides what to do.

The child should not know about setScore. It only shouts an event.

When not to lift

If only one component uses the data, keep the state there.

Lifting too high makes every render heavier and every prop list longer.

A filter example

Search does not filter. Results does not store the query. The parent does both jobs in one place.

Tip: Data flows down. Events flow up. If you feel stuck, find the parent that can see both sides.