DEV Community

Discussion on: Re-rendering in React

View post
Collapse
 
marzelin profile image
Marc Ziel • • Edited

Every time the state of a component changes, that component and all of its children are re-rendered.

This isn't entirely true because React compares each child and bails out of re-rendering if a child is strictly equal.

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      Count is: { count }
      { someComponent }
      <button onClick={() => setCount(count => ++count)}>
        Increase count
      </button>
    </div>
  );
}

const someComponent = <SomeComponent />;

function SomeComponent() {
  return <div>I'm some component</div>;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
therealnrf profile image
therealnrf •

That is actually not true as you can see in the examples. This behavior can be prevented though either by using memoization or the shouldComponentUpdate method (assuming the state can't be moved to another component of course).

The shouldComponentUpdate method returns true by default. This is why the default behavior of React is to re-render all child components on state change.

Collapse
 
marzelin profile image
Marc Ziel •

Not true, huh?

I've provided an example code, have you even checked it? Does SomeComponent re-renders when you click the button? So annoying...

Thread Thread
 
therealnrf profile image
therealnrf •

I stand corrected. But can I ask, why are you re-assigning the component to a variable and then using that variable to render the component? Because this seems to be why SomeComponent is not re-rendering.

It does re-render when you plug it in directly with <SomeComponent /> even though its still not changing when count updates.

Thread Thread
 
marzelin profile image
Marc Ziel •

I'm not re-assigning anything. someComponent is a React element and <SomeComponent/> is a function call that returns a React element. These are two different things from JavaScript standpoint.

If you have A = () => ({}) then A() !== A() but when a = A() then a === a. That's the gist of it.