index.md

I am currently facing a conundrum with MobX's shouldComponentUpdate not working properly in a HOC hierarchy. I'm using the @injectIntl decorator from react-intl and the @observer decorator from react-mobx.

This example is a little contrived, but hopefully it gets the point across:

class TodoList extends Component {
    @observable
    todos = [];

    render() {
        return (
            <ul>
                {this.todos.map(todo => (
                    <Todo
                        key={todo.id}
                        todo={todo} />
                ))}
            </ul>
        );
    }
}

// Does not work, each item re-renders every time
@injectIntl
@observer
class Todo extends Component {
    render() {
        return (
            <li>
                {todo.name}
            </li>
        );
    }
}

// Works, only the modified item re-renders
@observer
@injectIntl
class Todo extends Component {
    render() {
        return (
            <li>
                {todo.name}
            </li>
        );
    }
}

So in the non-working example, the component structure would look like this TodoList(InjectIntl(MobXStoreInjector(Todo))). And for the working one, it is TodoList(MobXStoreInjector(InjectIntl(Todo))).

But in my head, I would think that the first one would work, since MobX's shouldComponentUpdate comes after the one from react-intl, so even if that returns true the MobX implementation would still prevent a re-render.

This is what the dependency tree looks like when it is working:

And when it is not working: