Questions tagged [react-usememo]
169 questions
4
votes
2 answers
Problems with react-table using "useSortBy"
I am having some problems on react-table using useSortBy. With no useSortBy the table works fine.
Getting this error:
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or…
Daniel Teixeira
- 61
- 7
4
votes
3 answers
How to avoid rerender all child components which in loop when parent component state update
I m having one child component which is inside a loop of parent component. when one of the child components is updating the state of parent component, it is re-rendering the all children since it is loop. How can i avoid the re-render for each…
SuganthiRaj
- 63
- 1
- 6
4
votes
2 answers
React custom hooks and useMemo hooks
I have two "expensive" functions that I would like to memoize in my react application, as they take a long time to render. The expensive functions are used in an array map. I would like to memoize each result of the array map, so that if one…
furnaceX
- 567
- 2
- 8
- 15
3
votes
1 answer
ReactJS : useMemo hook fixed my infinite rerender issue instead of useEffect
Without useMemo : infinite rerendering component
I had an issue with the code below compiling successfully but rerendering the component infinite times and I get this error in console : Warning: Maximum update depth exceeded. This can happen when a…
watsum08
- 46
- 5
3
votes
1 answer
React useMemo dependency array with extra dependency
From the react docs:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Is it bad practice to add another value to the dependency array, even if it's not used in computeExpensiveValue?
Example:
const memoizedValue =…
TurtlePower
- 31
- 2
3
votes
4 answers
How can I delete an item from list without re-rendering undeleted Items?
Thank you for all your comments and helpful remarks.
following your advices, please find below a code sandbox link
https://codesandbox.io/s/magical-butterfly-uk0fjq?file=/src/item.js
which may help you figure out the issue.
Everything is obvious in…
FJTAIL
- 107
- 9
3
votes
1 answer
Adding object values to useMemo hook for React
I am attempting to create a react-table component using data that is pulled from a database. From the documentation I have read (https://react-table.tanstack.com/docs/quick-start), it seems like the react-table library uses a useMemo hook to create…
Shafi Kamal
- 91
- 3
- 10
3
votes
1 answer
Which param triggered React.useMemo recalculation?
here is my React hooks code:
function calc_c({a,b}){
//some long calculation that is based on a,b
}
function MyComponent(params){
var a=calc_a(params)
var a=calc_b(params)
var c=React.useMemo(()=>calc_c({a,b},[a,b])
}
my question: how to I…
yigal
- 3,923
- 8
- 37
- 59
3
votes
2 answers
React how can I use useMemo conditionally
I am still getting my head around React hooks and am trying to use useMemo conditionally based on different factors.
My useMemo part looks like this
const headers = React.useMemo(
() => [
{
Header: "Name",
accessor:…
nad34
- 343
- 4
- 13
3
votes
2 answers
How to memoize a part of a component list in React
Looking for some React rendering/useMemo guidance.
I have a list of 2,000+ items, each of which is a React component. There is a highlight of a "currently selected" item that renders independently of the list. That allows me to render the list only…
Peteris
- 3,548
- 4
- 28
- 44
3
votes
1 answer
Ensure that nested fields where the path is defined by a variable trigger React.useMemo update when added to the dependency array
I use TypeScript 4 and React 17
I had this code in a custom hook:
const myValue = useMemo((): string[] => {
if (someCondition) {
return (myMap?.field && myMap.field.[subfieldId]) || null
} else {
...
}
},…
Morgane
- 155
- 8
3
votes
1 answer
Is React moving away from React.memo in favor of useMemo?
Both React.memo and the useMemo hook allow performance optimizations by reducing recalculation and rerendering. However, they work definitely in that React.memo is used to wrap a functional component and the useMemo hook can be used on almost any…
Mark Rogers
- 96,497
- 18
- 85
- 138
2
votes
0 answers
How useMemo works with destructuring syntax?
On the project that we are developing, I have the task of optimizing the application, including using optimization.
Wrote this piece of code...
const {
searchSupported,
searchPaginationQuery,
searchModalTableColumns,
textFieldAccessor,
…
Konstantin Karpov
- 21
- 1
2
votes
2 answers
useState doesn't update state passed in component
The SelectedColumn value doesn't come in the CustomHeader component. However, setSelectedColumn works! Why ?
Also, I'm passing CustomHeader to constant components that use useMemo. Without useMemo CustomHeader doesn't work.
const [selectedColumn,…
Sweet Caramel
- 206
- 2
- 11