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?

Answer 2

Re-rendering component tree is something react manages well. Both redux and context api update component state which leads to a re-render. In terms of performance, if you are looking for a way to manage not necessary re-renders I suggest you have a look at a few useful hooks, useMemo, useCallback, and React.memo.

With these three hooks, you are able to prevent child components from re-rendering, if parent is updated.

const Parent = () => {

  const [childAState, setChildAState] = useState();

  useEffect(() => {
    setChildAState('Child A Updated');
  }, []);
  
  return (
    <ChildA childAState={childAState}/>
    <ChildB />
  );

};

const ChildA = () => React.memo((props) => {

  return <h1>Child A</h1>  

});

const ChildB = () => React.memo((props) => {

  return <h1>Child B</h1>  

});

In the above example, ChildB wont re-render if a state in Parent does change and leads to an update in ChildA.

For further reading: React.memo

Answer 3

if you really want to replace Redux using hooks I suggest using the useReducer and useContext hooks, they are easy to understand and quite flexible, here is an article that compares Redux and React hooks and detail: https://www.framelessgrid.com/react-hooks-vs-redux-for-state-management-in-2021/