Inside your useEffect you are logging list: console.log(list); So you either need to remove the above line, or add list to the useEffect dependencies at the end. so change this line }, [term]); to }, [term, list]);
For this exact case you’re right because undefined is passed as the dependencies of useEffect. This means useEffect runs on every render and thus the event handlers will unnecessarily get detached and reattached on each render. function listener() { console.log(‘click’); } function Example() { const [count, setCount] = window.React.useState(0); window.React.useEffect(() => { console.log(`adding listener ${count}`); … Read more
You can put the handleKeyUp function inside of the function given to useEffect (which is the recommended way of doing it according to the official documentation) and only add the listener and return a cleanup function when collapsed is false. useEffect(() => { if (collapsed) { return; } function handleKeyUp(event) { switch (event.key) { case … Read more
It’s an intentional feature of the StrictMode. This only happens in development, and helps find accidental side effects put into the render phase. We only do this for components with Hooks because those are more likely to accidentally have side effects in the wrong place. — gaearon commented on Mar 9, 2019
You can pass JSON.stringify(outcomes) as the dependency list: Read more here useEffect(() => { console.log(outcomes) }, [JSON.stringify(outcomes)])
TL;DR The first example is an unintentional side-effect and will trigger rerenders unconditionally while the second is an intentional side-effect and allows the React component lifecycle to function as expected. Answer I think you are conflating the “Render phase” of the component lifecycle when React invokes the component’s render method to compute the diff for … Read more
The setter function won’t change during component life. From Hooks FAQ: (The identity of the setCount function is guaranteed to be stable so it’s safe to omit.) The setter function (setState) returned from useState changes on component re-mount, but either way, the callback will get a new instance. It’s a good practice to add state … Read more
If you want to display a sort of confirmation before leaving the page then follow the beforeunload event guidelines According to the specification, to show the confirmation dialog an event handler should call preventDefault() on the event. However note that not all browsers support this method, and some instead require the event handler to implement … Read more
If the next state value depends on the previous value, as in this example of an increment button, it’s better to use the functional version of setState (setCount(prevCount => prevCount + 1)). You can run into errors if you’re passing the setter function into a callback function, like an onChange or HTTP Request response handler. … Read more