Questions tagged [react-memo]
65 questions
23
votes
4 answers
how to use React.memo with a Component contains children
I have two Components, and I wrapped Parent with React.memo:
Child
const Child = ()=>
I'm Child
export default Child
Parent
const Parent = (props)=> {props.children}
export default React.memo(Parent)
Use in App:
const App =…
Yokiijay
- 711
- 2
- 7
- 18
5
votes
5 answers
Prevent Child Rerendering if Parent is Rerendered Using Hooks
My bestSellerDummy data doesn't change, so I'd like to prevent the same Product child to be rerendered if parent rerenders. I have tried using useMemo in parent and React.memo in child but no luck, it's still showing log 'Rendering Product…
Jeaf Gilbert
- 11,495
- 19
- 78
- 105
4
votes
1 answer
React Memo resets values in component state
What I am trying to do
I'm trying to use an array of objects (habits) and render a "Card" component from each one.
Now for each Card (habit) you can "mark" that habit as done, which will update that Card's state.
I've used React.memo to prevent…
Swapnil Ingle
- 128
- 8
4
votes
1 answer
React: How to prevent re-rendering child components in `map`?
I tried to boil down the problem into an example as simple as possible:
We have a list of child components, each called NumChoice, each representing a number. NumChoice is wrapped in React.memo. In the parent component, we have an array of booleans,…
1man
- 5,216
- 7
- 42
- 56
3
votes
1 answer
React Native: infinite re-render when setting variable to same value
I'm using a React Native functional component as follows:
export const Component1 = () => {
const [var1, setVar1] = useState(false);
setVar1(false);
return (
)
}
This goes into an infinite loop, but when I remove the…
gkeenley
- 6,088
- 8
- 54
- 129
3
votes
1 answer
React.memo with react-router-dom useLocation()
Recently I found some performance issue with my React app, and after some research i discovered React Memo. Some training examples worked as excepted, but when connect it into my app it does not have any effect. I found that problem is with…
Mormen
- 153
- 12
3
votes
1 answer
Objects are not valid as a React child with React.memo
I am receiving the following errors
Warning: memo: The first argument must be a component. Instead received: object
Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a…
Sam
- 1,765
- 11
- 82
- 176
3
votes
1 answer
Rerender only specific Child Components in JSX map function
I am mapping through an array, which returns JSX Components for each of the items in the array. During runtime I want to pass down values. If they match the value of the individual items, their individual component gets modified.
I am trying to find…
Tobi
- 363
- 5
- 15
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
3
votes
2 answers
React.memo and withRouter
I want to not re-render my component on certain paths, trying to do this using React.memo and checking the current path using the withRouter HOC.
The compare function in React.memo does not get called.
function compare(prevProps, nextProps) {
…
Abhiman
- 53
- 2
- 7
2
votes
1 answer
How to use useCallback, useMemo and React.memo when dependency is an object?
I have useMemo when one of its dependencies is an Object that I get from the server, so even when the content of the object is the same - the useMemo is called over and over again in each sync from the server because the object itself is different…
user2993539
- 375
- 1
- 3
- 14
2
votes
0 answers
Why is React.memo not working as expected?
Right so I have a sports app and im just displaying the fixtures for each team like so:
export const Fixtures = ({ fixtures }) => {
console.log('rendering again')
return (
Red Baron
- 7,181
- 10
- 39
- 86
2
votes
1 answer
React.memo not re render if props change
I'm trying to create a Table component from scratch using React memo component as rows to prevent unecessary re-rendering.
The rows cells is an array of React components created from a children function with row data, row id, row index and a…
Tommaso Bari
- 25
- 1
- 4
1
vote
0 answers
Best practice comparing react memo areEqual props
A colleague and I were having a discussion. We have a function component we memo.
How to best send props to a function component and how to best implement the areEquals compare functions.
We are having a flatlist with a ton of items to render. We…
control-panel
- 255
- 6
- 17
1
vote
0 answers
ProgressBar Component Needlessly Rerendering on Parent State Change
I have a progress bar component in my React project that will run a "fill" animation with useEffect every time it is mounted. The problem is that, higher up the component tree, there is a drawer component that will trigger a state change by toggling…
CM K
- 188
- 1
- 2
- 8