Questions tagged [usecallback]
251 questions
0
votes
1 answer
Difference between using useRef with useCallback and useEffect when component mounts
For example, let's say we have to trigger a function when component mounts. For me, I have two options to doing it.
first one is using useRef() hook.
import { useCallback } from "react";
export default function Test() {
const ref =…
carryon
- 13
- 3
0
votes
0 answers
Tip Tap setContent function isnt working in Next-Ts
Trying to create a PWA note app and using tiptap in it. I'm trying to save content in localStorage to be able to run the app in offline mode and save content in the database whenever the user is back online.
The content is stored successfully in…
Abolfazl Ghodrati
- 11
- 4
0
votes
2 answers
Canvas not updating on depency update in React
Using React and Typescript, I am trying to update a canvas based on a provided image with the canvas and file upload DOM elements separated into their own components.
The problem I'm facing is that when a new image is uploaded, the canvas does not…
Zelkins
- 723
- 1
- 5
- 22
0
votes
2 answers
useEffects keeps looping for infinity
Pardon me if this is a silly question. Im a new react learner. Im trying using a create react app. I am using a custom hook for API handling only. Now I want the useEffect to run only when the data changes. Thats why I put it in dependency. But yet…
Cnerd Mahadi
- 21
- 4
0
votes
1 answer
Unable to understand how useCallback prevents re-renders
I am learning about useCallback from React's Beta docs. I re-created the example shown in the docs but I am unable to prevent any re-rendering by using useCallback and memo.
If you click on any product, the Shipping component is getting re-rendered…
Rajat Saxena
- 3,834
- 5
- 45
- 63
0
votes
2 answers
How to get rid of this infinite loop using useEffect and useCallback?
I wanna load the first batch of comments immediately (using useEffect) and then load additional pages when a "load more" button is pressed.
The problem is that my current setup causes an infinite loop (caused by the dependency on comments).
If I…
Florian Walther
- 6,237
- 5
- 46
- 104
0
votes
0 answers
In React, how can I keep the states inside a useCallback up-to-dates?
I have a state named questions In a React component.
const [questions, setQuestions] = useState([]);
and a useEffect method that runs only when the component is rendered the first time.
useEffect(() => {
let questionsArray = [];
//some work is…
Rongeegee
- 866
- 3
- 10
- 30
0
votes
1 answer
React idiomatic controlled input (useCallback, props and scope)
I was building a good old read-fetch-suggest lookup bar when I found out that my input lost focus on each keypress.
I learnt that because my input component was defined inside the header component enclosing it, changes to the state variable…
Vladimir
- 393
- 3
- 16
0
votes
0 answers
I want to use a custom button to increment a input number field but it is re-rendering the parent component and losing a state value
I have an input element for a number that increments, I want to create my own increment buttons because I don't like the default buttons, they don't work well on mobile.
So I created a button element that onClick handles the change in the number…
artworkjpm
- 1,255
- 2
- 19
- 40
0
votes
0 answers
React navigation params passing too slow
I am working on a screen which takes data through route.params.
const {
prompt,
isUpscaling,
imageToBeUpscaled,
useDefaultPrompts = true,
isChallenge = false,
challengeData = {},
isCommunityPage,
} = route.params;
When…
Brian Mason
- 85
- 1
- 9
0
votes
0 answers
How to memoize nested function in react js
How to memoize nested function?
For e.g., if we have following memoized components App, Test, OtherComponent
const App = React.memo(() => {
const handleChange = useCallback((rowData) => (option) => {},[]);
return
user3211534
- 123
- 1
- 2
- 6
0
votes
1 answer
How to get value which function calculates while clicking on button
I am clicking on a button , what It should do is trigger a function and add a new property inside object which is inside a large array of multiple objects, and eventually returns a new array , All I want to know is how we can use that new Array…
Curious_guy
- 161
- 11
0
votes
0 answers
Is there a way around requiring consuming code from having to use `useCallback` when passing a callback to my component
Scenario
WeekdayPicker.tsx
type Weekday = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
type WeekdayPickerProps = {
value: Weekday;
onChange?: (value: Weekday) => void;
};
export default function WeekdayPicker({ value, onChange }:…
suamikim
- 5,350
- 9
- 40
- 75
0
votes
1 answer
The increaseSecondState function is re-rendering the child component even when i didn't pass it as a prop to the child component
I didnt expect the child component to re-render because i didnt pass the increaseSecondState function as a prop to the child component. Because we all know after using React.memo on the child component, the only way it can re-render is if only its…
Richard Martyns
- 3
- 2
0
votes
1 answer
React useMemo and useCallback
I have doubts about the usage of useMemo and useCallback
const componentName = () => {
...
const renderItems = () => elements.map(elem =>
{elem.name}
...
return (
{renderItems()}
);
}
The first one is: Should…
Mauricio Etchevest
- 101
- 2
- 6