Part 3: Stop Syncing Props Into State (you probably don't need that useEffect)

Part 3 of the Modern React Patterns series

In the previous article (Part 2: Stop Fetching Data Inside useEffect (what modern React apps do instead)) we talked about one of the biggest reasons why React applications end up full of unnecessary Effects: fetching server data inside useEffect.

This time I want to cover another pattern that I still find suprisingly often during code reviews, even in mature codebases. Synchronizing props into local state, at first, it doesn't even look like a mistake. Actually, it feels like the obvious thing to do lije a parent passes some data, the child stores it in its own state and whenever the parent changes, the child updates its copy. Except that, in most cases, React never needed that second copy to exist.

The Pattern Everyone Writes at Some Point

If you've been writing React for a while, you've probably written something like this: