Resetting State When a Prop Changes in React

Managing state in React efficiently is crucial for maintaining a smooth user experience and preventing unnecessary re-renders. A common mistake developers make is manually resetting state in a useEffect hook when a prop changes. This article explains why this approach is problematic and how to properly handle state resets using the key prop.

The Wrong Approach: Resetting State in useEffect

Consider the following React component:

export default function Dashboard({ dashboardId }) {
  const [note, setNote] = React.useState("");

  React.useEffect(() => {
    setNote("");
  }, [dashboardId]);

  return (
    <div>
      {note}
      {/* More dashboard components */}
    </div>
  );
}        

Why This is a Bad Practice

1. Unnecessary useEffect Dependence: The effect runs every time dashboardId changes, leading to unnecessary state resets.
2. Potential Performance Issues: This pattern can introduce unnecessary renders, affecting performance in larger applications.
3. State Becomes Implicitly Tied to Props: Instead of being self-contained, state changes are now dictated externally, making debugging harder.

The Correct Approach: Using the key Prop

A better way to reset state when a prop changes is by leveraging React's key prop. Here’s the improved version:

export default function Dashboard({ dashboardId }) {
  return (
    <div>
      <DashboardNote key={dashboardId} />
      {/* More dashboard components */}
    </div>
  );
}

const DashboardNote = () => {
  const [note, setNote] = React.useState("");
  return <div>{note}</div>;
};        

Why This Works Better

1. Automatic Component Re-Mounting: Whenever dashboardId changes, React will unmount the DashboardNote component and mount a new one, resetting its state.
2. Cleaner Code: The state logic remains encapsulated within DashboardNote, making it easier to maintain.
3. Performance Optimized: No unnecessary effects or state updates, reducing unnecessary re-renders.

Conclusion

Instead of using useEffect to reset state when a prop changes, leverage React’s key prop to let React handle component remounting automatically. This approach results in cleaner, more maintainable, and efficient React applications.