react-hooks

The React Team says that the best way to get prev values is to use useRef: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state function Component(props) { const [ items, setItems ] = useState([]); const prevItemIdRef = useRef(); useEffect(() => { prevItemIdRef.current = props.itemId; }); const prevItemId = prevItemIdRef.current; // In a callback Hook to prevent unnecessary re-renders const handleFetchItems = useCallback(() … Read more

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

There could be many reasons, and most are due to version incompatibilites or using a ^ in package.json: 1. Ensure react and react-dom are of the same version Ensure that you have also updated the react-dom package and it is of the same version as react. In general react and react-dom should always be the … Read more

The react hook equivalent to the old componentWillReceive props can be done using the useEffect hook, just specifying the prop that we want to listen for changes in the dependency array. I.e: export default (props) => { useEffect( () => { console.log(‘counter updated’); }, [props.counter]) return <div>Hi {props.counter}</div> } For componentDidUpdate just by omitting the … Read more