Questions tagged [usecallback]
251 questions
4
votes
2 answers
How to correctly use React `useCallback`'s dependencies list?
I have an example like this:
codesandebox
I want to modify a state value in a callback, then use the new state value to modify another state.
export default function App() {
const [count, setCount] = useState(0);
const [text, setText] =…
Yang Yang
- 41
- 1
- 1
- 2
4
votes
1 answer
UseEffect and useCallback still causes infinite loop in react project
I can't seem to resolve an infinite loop issue in my react project.
I'm working on a daily-log react app. Let me explain the project briefly. Here is the picture of the code for quick view:
The same code is available at the bottom.
The structure…
Suraj Radhakrishnan
- 67
- 1
- 5
4
votes
0 answers
How to get which dependence cause useCallback / useMemo recalculate?
By using useMemo / useCallback hook in React, sometimes I find many unexpected render causing by useMemo / useCallback return value.
As I use React.memo to reduce React function component useless render, by React.memo second param, I could control…
tomision
- 964
- 9
- 22
4
votes
1 answer
React: How to prevent re-rendering child components in `map`?
I tried to boil down the problem into an example as simple as possible:
We have a list of child components, each called NumChoice, each representing a number. NumChoice is wrapped in React.memo. In the parent component, we have an array of booleans,…
1man
- 5,216
- 7
- 42
- 56
3
votes
1 answer
State management issue within intersectionObserver's callback function
I am trying to manage the index of the current page with state while implementing infinity scroll.
const [pageIndex, setPageIndex = useState(2);
const getList = useCallback(async () => {
try{
// request api
const {data} = await…
Hyeongrok
- 31
- 1
- 5
3
votes
1 answer
UseEffect is called twice in component mounting even when using useCallback
I have the following problem. I have a component which needs to call an API when mounted. I do the call in a useCallback like this:
const sendCode = useCallback(() => {
console.log('InsideSendCode');
}, []);
And then I call this…
Daniciuc Razvan
- 43
- 4
3
votes
1 answer
How do React refs behave inside useCallback?
I wouldn't expect the following React app to work properly, but it does. I'd expect the useCallback hook to capture and preserve the initial value of the ref. I understand that the ref couldn't be listed in the dependency array so maybe this is a…
maja
- 697
- 5
- 18
3
votes
1 answer
Difference between useCallback hook and empty dependency array and just defining a function outside of the component
In react, we can memoize a function using useCallback so the function doesn't change every rerender
const fn = useCallback(someOtherFn, []);
Instead, can we define someOtherFn outside the component, and if it uses setState, we give that to it as an…
Oleks G
- 94
- 5
3
votes
2 answers
useState with callback not updating useCallback dependencies
I have made a working example here:
https://codesandbox.io/s/magical-flower-o0gyn?file=/src/App.js
When I click the hide button I want to save the updated data to localstorage:
I click hide on first column: setValueWithCallback runs, sets the…
marchello
- 2,016
- 3
- 29
- 39
3
votes
1 answer
Is it possible to call useCallback inside another callback
in component A:
const getOnClick = useCallback(
(rec: GenericRec): (() => void) => () => {
setSelectedRecord(rec);
},
[],
);
in componant B child of A :
const openRecord = useCallback(
(row: Row) => () => {
…
Kaoutar BELLA
- 61
- 1
- 7
3
votes
2 answers
how to write onClick (with arguments) optimized by useCallback in React?
I need to implement a long list, each item in the long list will trigger a new function when onClick, because this function is unchanged every time it is rendered, so I want to use useCallback to optimize it, this returned function Fn needs to pass…
user13948420
- 35
- 1
- 5
3
votes
1 answer
TypeError: Object(...) is not a function with "useCallBack" , in React Version 16.13.1
I get an error message on my localhost port on the browser, I haven't deployed yet my code:
TypeError: Object(...) is not a function
NewEvent
src/events/pages/NewEvent.js:51
Here my react versions in package.json:
"dependencies": {
"react":…
aurore
- 31
- 2
3
votes
2 answers
How to use global object within useCallback without having it as a dependency (remove warning)
I have this warning in my usage of Reacts useCallback hook.
React Hook useCallback has a missing dependency: 'history'. Either include it or remove the dependency array.eslint(react-hooks/exhaustive-deps
import { useHistory } from…
Stephane
- 11,056
- 9
- 41
- 51
3
votes
0 answers
React Native View onLayout re-renders every frame while children height animates
To create a custom View with translateY I have to calculate the height of the container and content using onLayout. This worked perfectly, but today I've added an Accordion component which also animates. This happens to trigger the onLayout…
ronnyrr
- 1,481
- 3
- 26
- 45
2
votes
2 answers
Why does this React setter work if it should be a stale closure?
I have this below function. My randomize function is the same across renders, as I have wrapped it in a useCallback. When I click the randomize button, it re-renders my app.
However, when I click that button, since randomize is memoized, don't I use…
713sean
- 313
- 11