Component memoized with React.memo() keeps re-rendering

Question

I have a ParentComponent looking like this:

const ParentComponent = () => {
  [product, setProduct] = useState({
    name: "Test",
    description: "Information goes here..."
  })

  return(
    <ChildComponent product={product} updateProduct={setProduct}/>
  );
}

and a ChildComponent as follows:

const ChildComponent = ({product, updateProduct}) => {
  // some code here

  return(
    <RichTextEditor content={product.description} update={updateProduct}/>
  )
}

const isEqual = () => {
  return true; // I want to force the component to never re-render
}

export default React.memo(ChildComponent, isEqual)

What's happening here is that I have a product object with a description that is updated by the ChildComponent. The value for the description gets set via updateProduct every time the input changes in the RichTextEditor component. I understand that because of the state change of product the ChildComponent gets re-rendered everytime which is unfortunate because that can cause unwanted effects like making the input field inside RichTextEditor lose focus for example. So I tried forcing the ChildComponent to never re-render with my isEqual function that always returns true. It keeps re-rendering though, why is that?

I realize that there are other designs available to avoid this issue completely, and I'm probably going to do that anyways but before I do that I want to understand why I can not force ChildComponent to not re-render.

Then that's the reason why you are getting re-renders. React.memo only works on props, if you have other reason for re-rendering (useState/useContext/useReducer) it will not work. — Radu Diță
– Radu Diță, Commented May 13, 2022 at 15:00

Radu Diță · Accepted Answer · 2022-05-13 15:03:33Z

1

If you are using useState, useContext or useReducer then the component will still re-render.

This is straight from the docs.

answered May 13, 2022 at 15:03

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

XeniaSis Over a year ago

It will not re-render simply because you are using those hooks. It should only re-render if the state or the context changes

"React.memo only checks for prop changes. If your function component wrapped in React.memo has a useState, useReducer or useContext Hook in its implementation, it will still rerender when state or context change."

Duc Filan · Accepted Answer · 2023-08-03 01:54:42Z

1

Does your child component use any context?

Even when a component is memoized, it will still re-render when a context that it’s using changes. Memoization only has to do with props that are passed to the component from its parent.

To solve this, pass your context value into your component by props, not use context directly inside your child component.

answered Aug 3, 2023 at 1:54

Duc Filan

7,2073 gold badges24 silver badges26 bronze badges

Collectives™ on Stack Overflow

Component memoized with React.memo() keeps re-rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related