Don’t treat “receiving props” as a special event. Avoid “syncing” props and state. In most cases, every value should either be fully controlled (through props), or fully uncontrolled (in local state). Avoid derived state when you can. And always be ready to render!

I like these principles:

  1. Don’t stop the data flow. Props and state can change, and components should handle those changes whenever they happen.
  2. Always be ready to render. A component shouldn’t break because it’s rendered more or less often.
  3. No component is a singleton. Even if a component is rendered just once, your design will improve if rendering twice doesn’t break it.
  4. Keep the local state isolated. Think about which state is local to a particular UI representation — and don’t hoist that state higher than necessary.