Questions tagged [usecallback]
251 questions
1
vote
1 answer
Data Fetching Using useEffect() And useCallback In React
Issue
I'm looking for the most optimal way to fetch data using useEffect() when the fetch function is used in more than one place.
Situation
Currently, I have a parent component (ItemContainer) and a child component (SearchBar). ItemContainer should…
TAEK.B
- 13
- 3
1
vote
1 answer
Change React state in immutable way
I have a state which consists of array of Exam objects one of parameters of it (tasks) is array of objects too. I need to change parameter (status) of one item of parameter array (tasks) in one object (exam) in immutable way. Would appreciate you…
JS_noob
- 29
- 2
- 6
1
vote
1 answer
Children do not update on props change via Ref
I have the following React component:
import { useRef, useEffect, useState } from "react";
function Child({ containerWidth }) {
console.log("CHILD", containerWidth);
return
My parent's width is {containerWidth}px
;
}
export default…
SixtyEight
- 2,220
- 3
- 14
- 25
1
vote
2 answers
useCallback to fetch data on button click
I have a scenario where I am to fetch data on a button click and store it in a context variable. Please check the code below:
const [products, setProducts] = useState([]);
const handleButtonClick= useCallback(() => {
if (countryCode) {
…
bazinga
- 87
- 2
- 9
1
vote
1 answer
onSuccess callback in Plaid Link not updating
I've built a PlaidLink component using react-plaid-link as below. There's no issues when building with the standard way - passing in only public_token and account_id to the request body.
However, when I attempt to pass in stripeUid to the request…
isoaxe
- 177
- 2
- 11
1
vote
1 answer
React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array
const Standings = () => {
const [table, setTable] = useState([]);
const [id, setId] = useState("2021");
const fetchData = () => {
fetch(`http://api.football-data.org/v2/competitions/${id}/standings`, {
headers: { "X-Auth-Token":…
Pratham Bhagat
- 11
- 1
- 3
1
vote
1 answer
React debouncing problem with useCallback
Inside my React component, I have these:
const [vendor,setVendor] = useState("");
const [taggedWith,setTaggedWith] = useState("");
function updateQuery () {
const filters = [];
if(vendor) {
filters.push({
label: `Vendor: ${vendor}`
…
noiseymur
- 761
- 2
- 15
1
vote
1 answer
Every function called in `useEffect` stack must be wrapped in `useCallback`?
I am new to React and it seems to me that if you use a function inside of useEffect, that entire stack has to be wrapped in useCallback in order to comply with the linter.
For example:
const Foo = ({} => {
const someRef = useRef(0);
…
tau
- 6,499
- 10
- 37
- 60
1
vote
1 answer
useCallback and memoization
How the memorized callback function works? In some articles I read that the function is recreated if we do not use useCallback. But if it is recreated, should it be different from the prev version? In my code I didn't notice that there was a…
i like Cola
- 277
- 6
- 15
1
vote
1 answer
Cannot Read Property of undefined Object in dependencies array in useEffect or useCallback in React
I have a useCallback() method below to improve the performance. This will be same logic with useEffect()
If I have a dependency which is router.asPath, but sometimes the router is null, which may cause the function crash.
In order to improvement…
Xin
- 33,823
- 14
- 84
- 85
1
vote
2 answers
React Native useEffect with async call results in stale state
I have a simplified react native app here that makes a network call and sets a flag when it loads. There is a button onPress handler which calls another method doSomething, both methods which are in a useCallback and the dependency arrays are…
Doug
- 23
- 2
1
vote
1 answer
How to execute useEffect hook callback only when a single value from the hook callback changes?
It is being mentioned in the react documentation that every thing that is supposed to be changed needs to be present in the dependency array of the useEffect hook.
I could make use of // eslint-disable-next-line react-hooks/exhaustive-deps but this…
Raghav Sharma
- 141
- 2
- 13
1
vote
2 answers
Is it good practice to put functions inside useEffect?
The question is:
Assuming I have a fairly extensive logic in the component. Should I put all this logic inside useEffects or should I move these functions outside useEffect and use useCallback?
I can't find any peer-reviewed approach to this…
Jacek Tessen
- 43
- 1
- 7
1
vote
1 answer
When to use React useCallback hook
In my below React component I am fetching more items using Apollo Client fetchMore function.
What is exactly the purpose of using React useCallback hook here? And is it good idea to use that in this case?
const Carousel = ({ data: blockData,…
meez
- 3,783
- 5
- 37
- 91
1
vote
1 answer
React component re-rendering even after using memo and useCallback
The entire list gets re-rendered instead of the particular selected list item upon state change
https://codesandbox.io/s/lfgxe
(Refer the console to see components that gets rendered)
When the "add to the main array" button is clicked, the…
SB Praveen
- 49
- 6