DEV Community

Discussion on: Avoid Unnecessary Rendering for Function Components in React

Collapse
 
alinnert profile image
Andreas Linnert • Edited

I'm currently testing this on a project. I've wrapped some components with memo(...) (with only one parameter).

Now I'm wondering: Is there a reason not to wrap a component with memo()? So far I don't see any change in the behavior of my app, except the devtools don't show those components as re-rendering if their content doesn't change. Am I missing something?

Collapse
 
alinnert profile image
Andreas Linnert • Edited

After some research I found one reason to not memo a component: If its props change a lot (i.e. very frequently). But states aren't affected by this, because a state change (setSomeState(), coming from useState()) triggers a re-render in any case. So, examples would be <Clock> or <Timer> components, if the time to display gets passed to those components through props.

Now, if I look at a typical admin-like application I barely see any of such components. Maybe different kind of applications have more of them and it makes more sense to not memo some or many components.

Well, this is what I could find out so far und how I interpret that information. Please correct me, if I'm wrong or misinterpreting something.

I think, it's also worth mentioning what "render" actually means: A "render" is "just" a call of the component function. After this "render" React diffs the returned VDom with the previous VDom and applies changes to the DOM if necessary. I.e. a React render is not a DOM render. This is what made it feel scary for me before I knew the difference.