How do you invoke setDone only when component changes, using hooks?function MyComponent(props) {     const [done, setDone] = useState(false);      return <h1>Done: {done}</h1>; }Note: Try to explore useCallback function on your own.AuseEffect(() => { setDone(true); });BuseEffect(() => { setDone(true); }, []);CuseCallback(() => { setDone(true); }, [setDone]);DuseEffect(() => { setDone(true); }, [done, setDone]);

The correct answer is B.

Here's the step by step explanation:

1. First, you need to understand what useEffect does. It is a hook that allows you to perform side effects in function components. Side effects could be data fetching, subscriptions, or manually changing the DOM.

2. The useEffect hook takes two arguments: a function and an array of dependencies. The function is the side effect that you want to run. The array of dependencies is a list of variables that the effect depends on. If any of these variables change, the effect will run again.

3. In option B, useEffect(() => { setDone(true); }, []);, the array of dependencies is empty. This means that the effect will only run once, after the first render. This is because there are no variables that it depends on, so it has no reason to run again.

4. Therefore, if you want to invoke setDone only when the component changes (i.e., after the first render), you should use option B.

5. Options A, C, and D are incorrect because they will either run the effect more than once or not run it at all.

6. Option A, useEffect(() => { setDone(true); });, will run the effect after every render because it has no array of dependencies.

7. Option C, useCallback(() => { setDone(true); }, [setDone]);, is incorrect because useCallback is not the right hook to use in this case. useCallback returns a memo