React Best Practices Ever Developer Should Know

The article presents React practices aimed at simpler code and better performance. It argues that state should stay immutable, that not every value belongs in useState, and that derived or computed values should usually be created during render instead of stored in state or moved into effects.

Reading notes

#

• State should be treated as immutable so React can detect changes reliably and re-render correctly.
• Adding data to arrays should be done by creating a new array instead of mutating the existing one.
• useState should not be used for every value, especially when server state, URL state, or local storage already fit better.
• Values that can be derived from props or existing state should be calculated during render.
• Simple computations should not be moved into useEffect, and expensive ones can use useMemo.
• List items should have unique keys, and array indexes can cause bugs.
• Dependencies in useEffect should be complete to avoid stale closures and missed updates.
• useEffect should be a last resort when side effects are not handled more cleanly by derived values, event handlers, server-side fetching, or dedicated libraries.