Hook Best Practices

When working with Hooks, keep these tips in mind:

1. Don’t lie about dependencies: If you use a state variable or a prop inside useEffect, you MUST include it in the dependency array. If you don’t, your effect will use stale data.
2. Don’t overuse useEffect: If you can calculate a value directly during rendering, don’t use state and an effect to set it. Just calculate it as a normal variable!

// BAD: Unnecessary state and effect
const [firstName, setFirstName] = useState("John");
const [fullName, setFullName] = useState("");
useEffect(() => {
  setFullName(firstName + " Doe");
}, [firstName]);

// GOOD: Calculate during render
const [firstName, setFirstName] = useState("John");
const fullName = firstName + " Doe";