The array you pass as second argument to useEffect only checks if the elements in the array are === to the elements in it in the previous render. const newArr = arr; will lead to newArr === arr since it doesn’t create a new array, which is not what you want. Create a new array … Read more
useEffect has very specific timing aspects related to it that you can read about here. The function specified will be executed after rendering is complete and the DOM has been updated. This will happen after each rendering where any of the values specified in the second-argument array change. useCallback doesn’t automatically execute anything. It returns … Read more
This is indeed related to how your webpack devtool selection handle source maps. If you want a quick fix, try updating your webpack like so: // webpack.config.js module.exports = { // … return { devtool: “cheap-module-source-map”, // or if you’re using the same webpack config for prod + dev: // devtool: process.env[“NODE_ENV”] === “development” ? … Read more
Here is a working unit testing example: index.tsx: import React, { useState, FC } from ‘react’; export const List: FC<{}> = () => { const [data, setData] = useState<number>(); const getData = (): Promise<any> => { return fetch(‘https://jsonplaceholder.typicode.com/todos/1’); }; React.useEffect(() => { const func = async () => { const data = await getData(); const … Read more
There are two issues at play here Asynchronous call to setData setData gets called in a Promise callback. As soon as a Promise resolves, any callbacks waiting for it get queued in the PromiseJobs queue. Any pending jobs in the PromiseJobs queue run after the current message has completed and before the next one begins. … Read more
The React FAQs provide an explanation to it Are Hooks slow because of creating functions in render? No. In modern browsers, the raw performance of closures compared to classes doesn’t differ significantly except in extreme scenarios. In addition, consider that the design of Hooks is more efficient in a couple ways: Hooks avoid a lot … Read more
I was just thinking about this today. I believe that while it ‘breaks the rules’, there’s nothing that React could do to tell the difference between the two. So while it breaks the rules, if you have a good enough reason, understand the risks, then the ‘rules’ is just dogma. React basically knows which useEffect … Read more
EDIT july 2020: React documentation has now better explainations on this arg called lazy initializer. Using this function in another way could result to breaking changes due to undocumented effect. Following answer remain valid. As far as I can experiment, the init function as third arg is a transformer of the initialState. It means that … Read more
The value passed to the useState hook in the initial render is the initial state value, and gets disregarded in subsequent renders. This initial value can be the result of calling a function as in the following situation: const Component = () => { const [state, setState] = useState(getInitialHundredItems()) } But note that getInitialHundredItems is … Read more