Questions tagged [react-usecallback]
57 questions
0
votes
1 answer
Difference between React useCallback with pure function declared inside and outside component
Will there be a difference between these two approaches?:
// outside component
const magicIdx = (i) => (i - 1) / 3
//inside component
const calcIdxOut = useCallback(magicIdx, [])
const calcIdxIn = useCallback((i) => (i - 1) / 3, [])
Does defining…
Lucas Steffen
- 1,244
- 2
- 10
- 22
0
votes
1 answer
Why would we useCallback in useIsMounted hook to return the ref from the hook?
In the following example taken from usehooks-ts website
import { useCallback, useEffect, useRef } from 'react'
function useIsMounted() {
const isMounted = useRef(false)
useEffect(() => {
isMounted.current = true
return () => {
…
Hristo Enev
- 2,421
- 18
- 29
0
votes
1 answer
How to make a custom debounce hook works with a useCallback?
I did search for those related issues and found some solutions, but most about the lodash debounce. In my case, I create useDebounce as a custom hook and return the value directly.
My current issue is useCallback works with an old debounced…
Mia.Zhang
- 31
- 6
0
votes
4 answers
Array value appended instead of new value list display in React
Scenario -
Default Input number in text field - 1
Listed Items -
1
6
11
Now as soon as I remove 1 from the text field -
List Items -
NaN
NaN
NaN
Now enter 4 in the input field.
List Items -
NaN
NaN
4
9
14
Expected Behavior -
List Item should…
Nesh
- 2,389
- 7
- 33
- 54
0
votes
0 answers
React: Can't perform a React state update on an unmounted component. Sharing state between 2 components and updating it withing each other's component
I am a newbie in react and developing applications using react js (front) and express (API backend). Let say I have an organization table fetched over through API. The state network storing the fetched response is shared by both components…
Kamal Kumar
- 1
- 1
0
votes
1 answer
React useCallback hook: What are the correct dependencies for these handleChange & handleSubmit functions to prevent re rendering?
I have a login component which unnecessarily re-renders. I have wrapped the component with React.memo and am using the useCallBack hooks to prevent those functions from getting created on every render if there values don't change...
Consider the…
Antonio Pavicevac-Ortiz
- 7,239
- 17
- 68
- 141
0
votes
0 answers
useCallback on built-in component
I have a question on using useCallback on built-in/ non-custom components in React. Below I provided a simple example.
I wrapped "increment1" in useCallback so it would not be recreated and passed as a new function into MyOwnButton component. Thus,…
LY Hooi
- 165
- 1
- 9
-1
votes
1 answer
How can I prevent re render of react functional components if no props changed
Description:
I have a component imported in a loop in the Main component and whenever I update the state, the looped components are also re-rendered. So, how can I prevent them to render if no change is applied to the props of the…
Shiv Joshi
- 13
- 2
-1
votes
1 answer
Reactjs useEffect not showing all datas on page (after using useCallback
At first i was fixing the error "React Hook useEffect has a missing dependency:" by adding the useCallback.
Then new issue comes up, the API should return 10 items but only first items show on page.
Wondering which part is getting wrong and cause…
carol chaw
- 57
- 8
-1
votes
1 answer
useCallback for function that incorporates batched redux actions (from HOC). What shall i put in the dependancy array?
I have this component
import React from 'react';
import { batch } from 'react-redux';
const ContextMenu = ({
menuData,
isOpen,
changeIsMenuOpen,
changeAssetType,
}) => {
return (
cvass
- 23
- 5
-2
votes
2 answers
how to run functions after usestate is set and use the state value
I have a function that runs 2 async functions. The first one needs to set the useState data so that the second one can use that data. Then I am trying to get that variable and pass it to a third function. To pass state variables I am using npm…
730wavy
- 944
- 1
- 19
- 57
-3
votes
0 answers
What is the difference between useEffect and useCallback
I'm learning about hooks in React, but I have a doubt, in useEffect an action is executed only once (if there is no change in dependencies), but in useCallback it is also like this, useCallback allows executing a function only once too, if on…
