Questions tagged [usecallback]
251 questions
63
votes
2 answers
Passing a function in the useEffect dependency array causes infinite loop
Why is an infinite loop created when I pass a function expression into the useEffect dependency array? The function expression does not alter the component state, it only references it.
// component has one prop called => sections
const markup =…
mmason33
- 878
- 1
- 6
- 10
42
votes
1 answer
Should we use useCallback in every function handler in React Functional Components
let's say we have the components like this
const Example = () => {
const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter => counter + 1);
return (
…
Jake Lam
- 3,254
- 3
- 25
- 44
25
votes
3 answers
What are production use cases for the useRef, useMemo, useCallback hooks?
Outside of the counter example seen in many YouTube tutorial videos, what are practical/real-world use cases for useMemo and useCallback?
Also, I've only seen an input focus example for the useRef hook.
Please share other use cases you've found for…
ln09nv2
- 965
- 4
- 19
- 35
18
votes
2 answers
Should I wrap all functions that defined in component in useCallback?
As far as I've known, functions that defined in a React's functional component are regenerated whenever the component rerenders. Since useCallback can be triggered by specific dependencies, it prevents unnecessary regeneration of these functions.…
Peter
- 656
- 1
- 6
- 14
17
votes
2 answers
React useCallback hook for map rendering
When passing callback to component, I should use useCallback hook to return a memoized callback (to prevent unneeded renders):
import doSomething from "./doSomething";
const FrequentlyRerenders = ({ id }) => {
const onEvent = useCallback(() =>…
Naor
- 23,465
- 48
- 152
- 268
14
votes
3 answers
React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead
Consider this example:
let memoizedCb = React.useCallback(
memoize((param) => () => someFunction(param)),
[]
);
where memoize is from external library like "fast-memoize". Above code gives warning:
React Hook useCallback received a…
Giorgi Moniava
- 27,046
- 9
- 53
- 90
10
votes
2 answers
Should I memoize functions in custom hook?
I have the counter component. I encapsulated the business logic with custom hook. Should I optimize functions by means useCallback? If there is input onchange handler, will the situation be the same?
const increment = () => {
setCount(count +…
bigbabyweb
- 328
- 1
- 5
- 12
10
votes
2 answers
React hooks: is `useCallback` not so needed usually?
I am recently refactoring a web app using React Hooks. I encounter a problem regarding useCallback. Based on description of Kent: https://kentcdodds.com/blog/usememo-and-usecallback, useCallback is to pass in identical function reference to…
Joy
- 9,430
- 11
- 44
- 95
9
votes
2 answers
Why can't `useCallback` always return the same ref
I don't understand why useCallback always returns a new ref each time one of the deps is updated. It results in many re-render that React.memo() could have avoided.
What is, if any, the problem with this implementation of useCallback?
export…
Joseph Garrone
- 1,662
- 19
- 20
8
votes
1 answer
Handling API calls using useEffect vs using useCallback
This is very likely a dumb question -- I have the understanding that anything that triggers a side-effect should be handled with useEffect. I was wondering if that understanding is correct. Particularly in the context of making an API call -- is it…
Eddie Lam
- 579
- 1
- 5
- 22
8
votes
2 answers
How to convert functional component using hooks to class component
I'm trying to challenge myself to convert my course project that uses hooks into the same project but without having to use hooks in order to learn more about how to do things with class components. Currently, I need help figuring out how to…
albert_anthony6
- 594
- 2
- 9
- 30
7
votes
1 answer
useCallback Hooks getting old state values and not updating
My Callback returning same state after calling it again and again
i am new to react hooks in react classes i could have used shouldcomponentupdate and could have solved this issue
but there isn't params in usecallback hook
import React, {
…
Yash Gupta
- 135
- 2
- 10
7
votes
2 answers
React useEffect dependency of useCallback always triggers render
I have a mystery. Consider the following custom React hook that fetches data by time period and stores the results in a Map:
export function useDataByPeriod(dateRanges: PeriodFilter[]) {
const isMounted = useMountedState();
const [data,…
John Reilly
- 5,791
- 5
- 38
- 63
7
votes
1 answer
Why does `react-hooks/exhaustive-deps` lint rule trigger on nested object properties?
I'm trying to use React hooks for memoizing a callback. This callback specifically uses a function that's defined on an object.
const setValue = useCallback((value) => {
field.setValue(key, value);
}, [field.setValue, key]);
This triggers…
Matt Huggins
- 81,398
- 36
- 149
- 218
7
votes
1 answer
React | props inside UseCallBack not updating inside custom hook
I've build an custom custom post hook that returns the API response and the API post. And I am using useCallback hook to set the Response state
Where it goes wrong is that the Package prop doesn't update inside the useCallback hook.
When I log…
Salman
- 1,109
- 3
- 25
- 55