Don’t synchronize state, derive it

Ensure data and state are managed in one place and consistently accessed from that single source of truth to avoid duplications and inconsistencies. A common mistake is to synchronize state between two different components where instead this should be derived from the state in a centralized place.

Examples

  • In a React app, instead of syncing the URL with the state of a component, you let the state of the component be derived from the URL and when the state needs to be updated you update the URL directly. You’ll likely do this with React Router which manages updates to the URL for you.