Use apiOptions as state value I’m not sure how you are consuming the custom hook but making apiOptions a state value by using useState should work just fine. This way you can serve it to your custom hook as a state value like so: const [apiOptions, setApiOptions] = useState({ a: 1 }) const { data … Read more
The reason the linter rule wants onChange to go into the useEffect hook is because it’s possible for onChange to change between renders, and the lint rule is intended to prevent that sort of “stale data” reference. For example: const MyParentComponent = () => { const onChange = (value) => { console.log(value); } return <MyCustomComponent … Read more
I ended up taking a little bit from various answers to make my own hook for this. I wanted the ability to just drop something in place of useEffect for quickly debugging what dependency was triggering useEffect. const usePrevious = (value, initialValue) => { const ref = useRef(initialValue); useEffect(() => { ref.current = value; }); … Read more
You can write a custom hook to provide you a previous props using useRef function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }); return ref.current; } and then use it in useEffect const Component = (props) => { const {receiveAmount, sendAmount } = props const prevAmount = usePrevious({receiveAmount, sendAmount}); useEffect(() … Read more
It’s not quite the same. Giving it an empty array acts like componentDidMount as in, it only runs once. Giving it no second argument acts as both componentDidMount and componentDidUpdate, as in it runs first on mount and then on every re-render. Giving it an array as second argument with any value inside, eg , … Read more
Edit: as noted by Meng-Yuan Huang, this issue no longer occurs in react-scripts@^4.0.1 This error occurs because react-scripts has a direct dependency on the 2.xx range of @typescript-eslint/parser and @typescript-eslint/eslint-plugin. You can fix this by adding a resolutions field to your package.json as follows: “resolutions”: { “**/@typescript-eslint/eslint-plugin”: “^4.1.1”, “**/@typescript-eslint/parser”: “^4.1.1” } NPM users: add the … Read more
The useEffect and setState will cause extra renders on every change: the first render will “lag behind” with stale data and then it’ll immediately queue up an additional render with the new data. Suppose we have: // Maybe I’m running this on a literal potato function expensiveCalculation(x) { return x + 1; }; Lets suppose … Read more
For me, clean the state in the unmount of the component helped. const [state, setState] = useState({}); useEffect(() => { myFunction(); return () => { setState({}); // This worked for me }; }, []); const myFunction = () => { setState({ name: ‘Jhon’, surname: ‘Doe’, }) }
You can use more than one useEffect(). For example, if my variable is data1, I can use all of this in my component: useEffect( () => console.log(“mount”), [] ); useEffect( () => console.log(“data1 update”), [ data1 ] ); useEffect( () => console.log(“any update”) ); useEffect( () => () => console.log(“data1 update or unmount”), [ data1 … Read more
As the guide states, The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API. In this example from the guide it’s expected that count is 0 only on initial render: const … Read more