A short debugging story about React.memo, prop drilling, and a missing useCallback.

The symptom

We had an editable table: one row per item, each row with a couple of text inputs. Every row component was wrapped in React.memo, specifically so that typing in one row wouldn’t force every other row to re-render. On a table with dozens of rows, that matters — otherwise every keystroke re-renders the whole table.

It didn’t work. Typing a single character in one row’s input made every row re-render, every time.

React’s hooks (in particular useState and useEffect) are deceptively simple. At first glance, it feels like: state goes into useState, side effects go into useEffect. But in real-world apps, things get messy quickly: bugs from re-renders, race conditions, and code that’s harder to reason about than it should be.

Let’s break down when to use state, when not to, and why overusing useEffect is harmful.

1. What belongs in State?

A common mistake is to throw everything into useState. But not all data needs to be stateful. Here’s a good rule of thumb: