match object is always newly created

[greenimpala]

<Route> components pass props.match as a fresh object when the URL / params have not changed. Is this by design? This was not the case with RR V3. This breaks the PureComponent paradigm. See codepen below for example.

Version

4.0.0

Test Case

https://codepen.io/anon/pen/NjYwZO?editors=1112

Steps to reproduce

Render a PureComponent within a Route.

Expected Behavior

If the URL has not changed then re-renders of the Route should be passed the same props.

Actual Behavior

match is always a new object causing the component to be re-rendered. Even though its contents are unchanged.

[timdorr]

Yes, this is intentional. You should implement your own sCU to use the semantics you prefer, checking on the field values that matter to your component's updating.

Simple equality could be misleading, because the match object's properties could change if we re-used the object. Also, it would be messy to track the existing object because computeMatch would need to keep it around and there can be multiple matches within the same tree.

[greenimpala]

It's impossible to safely implement an sCU to take care of this because child routes may use arbitrary params. If a higher level route component only cares about /:id and ignores match / match.params then this blocks lower level routes from rendering when the URL changes to {props.match.url}/:subid for example.

the match object's properties could change if we re-used the object.

In that case you'd make a new Object - you just memoize matchPath in Route.js from its input (pathname, path, strict, exact).

@timdorr I am happy to submit a PR if you believe this should be handled in the RR4 API.

[mattkrick]

This was a huge gotcha, it's causing an unnecessary rerender on a handful of components.

Simple equality could be misleading, because the match object's properties could change if we re-used the object

@timdorr could you give some info on this? I assume match is treated as an immutable internally, and if folks mutate it in their app, then they shouldn't expect an update, right?

i think @greenimpala has a good idea in the memoization. @timdorr could you confirm if that'd be an acceptable PR?

[maierson]

Any news on this? It's causing us unnecessary re-renders on our PureComponent main view invalidating all our immutability efforts.

@timdorr Is there at least a way to prevent the Route from injecting the match object into the component's props?

[imarotte]

I'd also love additional info on this @timdorr

There has to be another alternative than writing massive amounts of sCUs. That just isn't practical for large scale projects

[shahzad31]

Any update on this issue, i just started optimising my app and i found this to be a big problem for me.

[pealmeid]

Same here, just ran into this issue when I was optimizing a project. Any updates? Thanks in advance.

[shahzad31]

well what i have done is don't pass whole match object , just extract whatever prop you need in child component and pass that.

[pealmeid]

@shahzad31 thanks for the quick reply, can you give more information? At what moment in the component's life cycle are you extracting the props?