Skip to content

Instantly share code, notes, and snippets.

@maxdeviant
Last active August 9, 2016 14:50
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save maxdeviant/bc8dd7eb3e075446038322f1bea1524c to your computer and use it in GitHub Desktop.

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.

@maxdeviant
Copy link
Author

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

And when it is not working:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment