Stack Overflow
Stack Overflow

Questions tagged [react-memo]

65 questions
1
vote
1 answer

React Nested Object State Using Memo

I pass in props to a function component: const [accountForm, setAccountForm] = useState({}) const syncForm = (subForm, name) => { const form = {...accountForm, [name]: subForm} setAccountForm(form) } <>
Ddeokbokki
  • 131
  • 2
  • 10
1
vote
1 answer

How to prevent rerendering of children inside List component of react-window

Problem I'm trying to achieve a behaviour, when merely changed items of the list are being updated and rerendered with new data. I wrote a component which is being updated when timer is off: import { FixedSizeList as List } from…
Juriy
  • 565
  • 1
  • 5
  • 17
1
vote
2 answers

React Hooks - Preventing child components from rendering

As a newbie in React, it seems that re-rendering of components is the thing not to do. Therefore, for example, if I want to create a menu following this architecture : App is parent of Menu, which have a map function which creates the MenuItem…
FJTAIL
  • 107
  • 9
1
vote
1 answer

React Native: You have a large list that is slow to update

I am trying to implement pagination in React Native using FlatList. I have followed the best practices, yet I am still getting the following error: VirtualizedList: You have a large list that is slow to update - make sure your renderItem function…
Chandra Panta Chhetri
  • 11
  • 1
  • 4
1
vote
1 answer

Child component is still re-rendered even if it is not consuming the context

I have the following structure in my React code: const Parent: React.FC = (props) => { const [value1, setValue1] = useState(null); return (
Görkem Özer
  • 504
  • 5
  • 13
1
vote
2 answers

React.memo not working on a functional component

I tried using React.memo() to prevent re-rendering on one of my components but it keeps on re-rendering whenever there are changes on its Parent Component. Here's my child component with React.memo() const Transactions = React.memo(() => { …
paoloml
  • 19
  • 1
  • 4
1
vote
2 answers

Functional component as initial state value throws children undefined without wrapping in React.memo

Trying to set DefaultLayout component as initial state value. It throws cannot de structure property children of undefined. If I wrap the DefaultLayout component in React.memo it works without any error i.e export default…
Yeshwanth Kumar
  • 81
  • 1
  • 1
  • 8
1
vote
2 answers

Cache data is custom hook - prevent rerender

I have a custom hook which fetches some basic user profile data from my graphql server. It is called from a number of components to access that data. Right now it seems like it is causing rerenders, because it fetches that data again, each time it…
ambe5960
  • 1,870
  • 2
  • 19
  • 47
1
vote
2 answers

React re renders everything every time key is pressed

I have a chart and an input field below. Basically the user can ask a question and the chart will change accordingly. Here is how it looks like Here is the sample of the code below (ignore CoreUI syntaxes) …
Souvik Ray
  • 2,899
  • 5
  • 38
  • 70
1
vote
0 answers

ReactNative deep cloning state for Flatlist

My FlatList renderItem was re-rendering every item when one of them was changed. After doing some debugging i deepcloned the state variable which holds the items (+ React.memo), it's working fine now but not sure if it's the optimal solution. Snack:…
hossein zare
  • 45
  • 4
1
vote
0 answers

Is it a good idea to use React.memo() with inputs?

I know there is a lot of questions about React.memo(). But like I read before, there is no definitive rule about it. It depends of cases. I read too, that React.memo could be worth when props changes often. So inputs are a particular case for me. In…
Geo Daz
  • 214
  • 1
  • 11
1
vote
1 answer

React not working with memo and tree structure

I've been going at it for 2 days and cannot figure it out :( I have a tree-like conversation as you can see in the screenshot. When a person types something in an empty input field, the Message is then added to the reducer array…
Ilya Karnaukhov
  • 3,838
  • 7
  • 31
  • 53
1
vote
1 answer

How to render only subchild without rendering all high level component

I m having one sub child component which is inside a loop of parent component. when one of the sub 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…
SuganthiRaj
  • 63
  • 1
  • 6
1
vote
0 answers

Preventing React-Leaflet from unnecessary re-render of Map component

Because my app handles the mobile and desktop views in two different components, I've needed to use useContext API to distribute state/propa across them. I have a Map component and upon moving from mobile to desktop and vice-versa the Map…
Antonio Pavicevac-Ortiz
  • 7,239
  • 17
  • 68
  • 141
1
vote
2 answers

How to test a memoized component's callback using React Testing Library?

I'm using React Testing Library with Jest to test my components. One of the components renders a table with data so I decided to use React.memo as suggested by the table library's author. I'm using it like this: import React, { memo } from…
Breno Baptista
  • 73
  • 2
  • 8
1
2
3 4 5