CODEWITHSUNDEEP
reactjsreact-hooks
Krishna
Krishna

Reputation: 1362

Function rendering multiple times. UseCallback React

I am trying useCallback for first time. I am not able to see any changes from earlier output in terms of function re rendering.

My function structure will be

const myfunction = ( array1, array2) => {
    //doing a very big calcuation
}

what I tried to use is

const getCards = useCallback((a,b) => myfunction(a,b),[myfunction])

I tried to to pass a,b in dependencies of Usecallback which gives me parameters not found error.

I am passing getCards into the component like this

<Component summaryCallback={getCards}>

I am trying to reduce the number of call inside my function. I want to call this function only if there is a change in array1 or array2 from my previous rendering

Thanks in advance

Upvotes: 0

Views: 1618

Answers (1)

Felix
Felix

Reputation: 2691

All hooks are stored with their respective dependencies. If you use a variable that's not included as a dependency to a hook, their initial value is used.

Adding it to the dependency list will enforce the update of the hook and therefore all data inside the hook.

Either way, you might not at all use useCallback if you've got large/heavy computations. You might consider useMemo for it. Ref: https://reactjs.org/docs/hooks-reference.html#usememo

You might use it like the following:


const cards = useMemo(() => { /* heavy computation */ }, [depA, depB]);

return <CardList cards={cards} />

It rerenders everythime, you're dependencies depA or depB change.

Upvotes: 1

Related Questions