Stack Overflow
Stack Overflow

Questions tagged [usecallback]

251 questions
6
votes
1 answer

What is the difference between defining a function outside useEffect and calling that function inside of it and defining a function inside useEffect?

I have few scenarios and I'd like to understand the differences in regards to rendering and performance. The example shown below is for a simple function but please consider a more complex one too as well as an async function. Scenario 1: Defining…
mongonoob
  • 103
  • 1
  • 5
6
votes
1 answer

React: Prevent infinite Loop when calling context-functions in useEffect

In my react app, I am rendering different instances of Components and I want them to register/unregister in a Context depending if they are currently mounted or not. I am doing this with two Contexts (ItemContext provides the registered…
Giraphi
  • 1,383
  • 1
  • 11
  • 26
6
votes
2 answers

is there any benefit of using useCallback without React.memo?

From what i understood from React documentation and other material across web, useCallback is used to avoid re-rendering of child component by ensuring that memoized version of callback is passed to it, thus referentially props remain same for child…
Ravi Chaudhary
  • 660
  • 6
  • 22
6
votes
2 answers

Event listener functions changing when using React hooks

I have a component that uses event listeners in several places through addEventListener and removeEventListener. It's not sufficient to use component methods like onMouseMove because I need to detect events outside the component as well. I use hooks…
jorgen
  • 3,425
  • 4
  • 31
  • 53
6
votes
2 answers

useLoopCallback -- useCallback hook for components created inside a loop

I'd like to start a discussion on the recommended approach for creating callbacks that take in a parameter from a component created inside a loop. For example, if I'm populating a list of items that will have a "Delete" button, I want the…
Alvaro Mendez
  • 134
  • 2
  • 13
5
votes
3 answers

Why use useMemo and not useCallback here?

So as i understand the difference between the two is that useCallback is used if a function or object or array is returned while useMemo when a primitive is returned. But i was looking up debouncing (this is the article:…
H.b
  • 239
  • 2
  • 13
5
votes
1 answer

React useCallback: useCallback is still re-rendering function each time

I'm fairly new to the useMemo and useCallback hooks within react and I'm kind of stuck as to why my functions still continue to re-render even if the variable I'm checking against stays the same. Currently I'm trying to build a google map that…
Michael
  • 1,454
  • 3
  • 19
  • 45
5
votes
1 answer

How to render only the concerned component with a custom hook and useContext

I'm trying to create a custom hook useFocus based on useContext to set the focus only on the component i select. Its working but other components are rendering even i used useCallback for the function returned by my useFocus custom hook. i would…
Norbert P
  • 53
  • 3
5
votes
2 answers

useCallBack react-hooks/exhaustive-deps warning

This is part of my code in React js: export default function Registration() { const [email, setEmail] = useState(null); const [password, setPassword] = useState(null); const [passwordRepeat, setPasswordRepeat] = useState(null); const…
Naor
  • 337
  • 1
  • 3
  • 11
5
votes
1 answer

Why isn't React's useCallback optimized with a ref?

TL;DR Why is useCallback defined as (roughly) function useCallback(callback, deps) { return useMemo((...args) => { return callback(...args); }, deps); } instead of like this? function useCallback(callback) { const fn = useRef(callback); …
Kelley van Evert
  • 1,063
  • 2
  • 9
  • 17
5
votes
1 answer

React Typescript and useCallback

I'm trying to use Typescript and useCallback, but I'm having this error Expected 0 arguments, but got 1 This is my code const searchFriends = useCallback(() => (filterValue: string): void => { if (dataState.length <=…
Alfrex92
  • 6,278
  • 9
  • 31
  • 51
5
votes
1 answer

React useCallback with debounce works with old value, how to get actual state value?

I can not fulfill all the conditions: I need some function inside useCallback, because I set it as props to child component (for re-render preventing) I need to use debounce, because my function is "end point" and can be called ~100times/sec I need…
mixalbl4
  • 3,507
  • 1
  • 30
  • 44
4
votes
2 answers

Should component itself prevent unwanted useEffect() calls?

Using useEffect() properly is sometimes not that easy. Imagine we have the following simple app using the Counter component: import { useState, useEffect } from 'react'; const Counter = ({ onOdd, onEven }) => { const [count, setCount] =…
Robo Robok
  • 21,132
  • 17
  • 68
  • 126
4
votes
1 answer

React prevent re-render by using functional variant of useState

I am trying to understand the exact difference in terms of how the re-render of function component is caused in one case using plain setState V/s other case which uses functional state update The relevant code snippet is as below Case 1 : Causes…
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
4
votes
1 answer

How to memoize custom hooks to improve performance

Have below function which is common custom hook and called from multiple places. How this can be memoized to improve performance. (While debug on browser then observed it called multiple times). It would be also fine if fields.forEach only memoized…
TechS
  • 167
  • 1
  • 5
  • 14
1
2
3
…
16 17