Next.js Discord

Discord Forum

How to change the state of a parent component without re-rendering the child components?

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hi there. I was hoping to see if there's any resources or libraries that I can use to update the state of my parent component without re-rendering the child components, similarly to how Solid.js surgically updates state (which I can't use because I need React Three Fiber/Drei in my project). Thank you!
Answered by Yacare Caiman
You should investigate React.memo instead of useMemo
View full answer

6 Replies

Yacare Caiman
try React.memo
@Yacare Caiman try React.memo
Asiatic LionOP
Would useRef work as well? I wanted to update the pages prop of ScrollControls without re-rendering Model. I'm struggling to understand the difference between useRef and useMemo in this context 


  return (
    <Canvas {...props}>
      <Camera position={cameraPosition} />
      <ScrollControls pages={pages} damping={0.1}>
        <Suspense fallback={null} r3f>
          <Model />
          <Common />
        </Suspense>
        <Preload all />
        <Scroll html>
          {InterfaceContent && <InterfaceContent />}
        </Scroll>
      </ScrollControls>
    </Canvas>
  );
};
Yacare Caiman
You should investigate React.memo instead of useMemo
Answer
Yacare Caiman
Just use React.memo to wrap the Model component
@Yacare Caiman You should investigate React.memo instead of useMemo
Asiatic LionOP
Thank you, I'll try it out!
@Yacare Caiman Just use React.memo to wrap the Model component
Asiatic LionOP
Hey just wanted to forward you a thank you. I used React.memo and ended up using typescript and organized my code. Page transitions run much more smoothly