Issues with triggering shouldComponentUpdate


(Dexter Marks Barber) #1

Hey there,

I’ve come to notice that shouldComponentUpdate does not seem to get called when a prop, which is an object, gets updated.

I’m writing a NextJS application that uses React and from a custom _app.js I pass Next’s router object into my navigation bar, but it never updates even if router.route changes so I’m having to pass in router attributes that I want to trigger changes separately.

This does not cause the component to update:

render() {
    const { router} = this.props;

    return (
        <Navbar router={router}/>
    )
}

This does cause the component to update:

render() {
    const { router} = this.props;

    return (
        <Navbar route={router.route} status={router.status}/>
    )
}

Apart from calling a forceUpdate on Navbar is there a work around to listen for object changes?

Cheers


(Michal Rada) #2

You need to create new Object from the route object. Try desctructuring like this:

render() {
const router = { ...this.props.router };

return (
    <Navbar router={router}/>
)

}