CODEWITHSUNDEEP
reactjs
Balaji Rekadi
Balaji Rekadi

Reputation: 33

How does React.js re-render components?

I'm new to react. I'm going through their docs to understand how react works. So it was mentioned that when state/props/setState() changes/called, react rerenders the entire component.

Also, I read that react elements are immutable and they are rendered only when there is a change. So when react tries to render a component it actually traverses through all the elements checks for differences and renders only those elements whose data is changed. It won't simply re-render the entire component.

Am I right regarding this? Or is my understanding wrong?

Upvotes: 3

Views: 3735

Answers (4)

PetErr
PetErr

Reputation: 23

Nothing has made this clearer for me than this cheat sheet by A. Sidorenko.

Edit: Essentially yes any state change will trigger a re-render. This includes the component where the state change was initiated and all its children. For instance, if your composition is:

A > B > C

If the state for A is updated then A, B, and C will get re-rendered. There are ways to prevent re-rendering subcomponents (e.g. memo, useMemo) so I point you the cheat sheet referred to above for the complete details.

Upvotes: -1

Andrew
Andrew

Reputation: 5293

I believe a clearer way to summarize when React components re-render would be:

React components re-render when, and only when:

  1. Their state changes (via setState() or useState())
  2. They are passed new props;
  3. Their parent component re-renders.

Caveats:

  • You must update state correctly for the component to re-render, i.e. via setState() or useState(). If state changes via other, "illegal" means, such as directly accessing state, React won't notice, and won't re-render the component.

  • React props are read-only, so when we say "when a component's props change," we really mean when the component is passed props with changed values. The props should not be mutated within the component.

  • If you use useMemo() or React.memo(), then a child component will only re-render when the parent component re-renders if the props it receives have changed.

  • It's important to distinguish between re-rendering the virtual DOM and updating the actual DOM. Just because a component re-renders doesn't mean it's updated the DOM. When a component re-renders, React compares the new version to the previous, and only updates the actual DOM if something has changed 1, 2.

Upvotes: 1

Dennis Vash
Dennis Vash

Reputation: 53994

I read that React elements are immutable and they are rendered only when there is a change.

Saying that React elements are immutable is not true, you need to treat them as immutable, especially component's state and props.

So when React tries to render a component it actually traverses through all the elements checks for differences and renders only those elements whose data is changed.

The default behaviour is to render all sub tree when the parent rerendered by calling setState (which triggers Reconciliation on component's sub tree).

So saying it will render components on "data change" is not true, they will rerender anyway by default, even if the "data" didn't change.

On saying "data is changed" we mean on props change (shallow comparison by default, use memoization to change it).

We can use key prop to help with the reconciliation process.

Upvotes: 1

Rahul
Rahul

Reputation: 732

You are right, react re-renders the component when props or state changes. That being said, when a child component received new props, react does not check if the props have changed when you use React.Component, it just re-renders even if you pass same props again.

In order to make components render only if they receive different props you can use React.PureComponent in case of class components or you can wrap the component with React.memo() in case of functional components.

Upvotes: 1

Related Questions