React. Basic example of re-rendering using react-router. +100 rep

Question

I'm newbie. And I'm newbie at React. I'm trying react-router. I saw this example: https://reacttraining.com/react-router/web/example/basic.

I reproduced it on Codesandbox.io here: https://codesandbox.io/s/7jxq0j6qp0

I don't understand why the Menu is re-rendering itself when I change URL using menu's links.

If you open console you can see it.

Why?

I think it should not re-render itself. Just the route section. Where am I wrong?

That's a normal behavior. Your <Menu/> is inside the Router tag, so it'll re-render every time when you change to any route. — reisdev
– reisdev, Commented Jul 4, 2018 at 21:38
@MatheusReis it can't be outsdie because I use <Link component. What do you suggest? — user4412054
– user4412054, Commented Jul 4, 2018 at 21:39
Because is a negative perf impact. This is just a Basic Example. But I also wanna understand. It's a useless re-render! — user4412054
– user4412054, Commented Jul 4, 2018 at 22:05

devserkan · Accepted Answer · 2018-07-04 22:50:32Z

1

You can write your component as PureComponent. Since there is no prop changes right now it won't be re-rendered:

class Menu extends React.PureComponent {
  render() {
    console.log("Menu render() - ", Date.now());
    return (
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />
      </div>
    );
 }
}

But, please be aware of the negative sides of this method for other use cases: Dealing with Update Blocking

answered Jul 4, 2018 at 22:50

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

5 Comments

user4412054 Over a year ago

Yes, but I don't understand why. PureComponent is heavy because sometimes is better to re-render that check if is to re-render.

user4412054 Over a year ago

I just wanna know why it has to re-render if nothing changes.

devserkan Over a year ago

It is rerendering because location changes. I know this does not answer your question which is: why it has to.. I think it is better to ask this on React Router's issues section of Github repository.

user4412054 Over a year ago

but it has to do with the link you posted in your answer? The Dealing with Update Blocking one?

devserkan Over a year ago

It does not explain "why those components are rerendering" it just helps what if we or a third-party library do something causing to block this rerender and we have a problem about routing.

Collectives™ on Stack Overflow

React. Basic example of re-rendering using react-router. +100 rep

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related