How to completely replace redux with react hooks?

Question

I am thinking of using react hooks [useReducer, useContext] and context api in place of redux. Having said I want my state to be bit complex in structure. Lets see the structure be as

state = {
    key1: true,
    key2: {
        key3: [],
        key4: ''
    }
}

The thing that I am clear with is both redux and context api allows me to create complex structure. And in case of react hooks usage I can very well use Provider, Consumer/useContext to let pass my store state value to all my components.

The thing that Redux gives me more is that if any specific key say, key4, is updated then helps me not to re-render entire app tree using connect function from react-redux. And this is my query.

How can we make react hooks and context api to not to re-render my entire app which is a major performance bug?

Answer 1

This is something you just cannot achieve with only react context. Of course, you can trick around with useMemo so that the direct children of your Provider do not rerender, but apart from that: everytime any property of your context value changes, all consumers of said context will rerender, no matter if they used that specific property or not. You cannot bail out of a context rerender for some children only.

This might change in the future once useContextSelector is integrated in react, but for now, this is just standard React behaviour and there is no way around that.

You can find more on "context vs a real state management solution" in this article.

For now, if you just want to reduce boilerplate it is probably just better to read up on modern redux or to look into other full-fledged state management libraries like mobx or recoil. But you won't get there with context alone without fully reimplementing one of those - and where's the point in that?