Derived State

Go to Twitter Post

useState Might Be Overused

useState sometimes is overused, there will be a case where you can just use Derived State

The wrong way

Say that we're building this simple component

Natural way is to create another state for filtered since it's a data that can change

React Re-renders

However, react re-renders! Every time the search & data state changes, it's going to call the whole function again.

Derived State

Every re-render, if you have a computation, it's going to be re-run again and again. So we can derive the filtered from the data & search state itself.

This concept is called derived state.

Performance improvement

If you're concerned with performance, you can utilize useMemo hook, so every re-render it can check the dependency array and decide if it should recompute