⚛️ React tip: If state values are related, and must be kept in sync, create...
⚛️ React tip: If state values are related, and must be kept in sync, create the "derived" value on render.
Example: If you have data and filteredData, create filteredData on render.
Doing so eliminates a useEffect, and needless syncing code. This reduces the chance of bugs.
Common concern: If I derive state on each render, won’t that be slow?
Answer: Typically it’s no big deal. But, if it’s expensive, wrap the derived state code in useMemo. Then it’s only recalculated when the inputs change.