DEV Community

Discussion on: Oh Hello Apollo Client , Goodbye Redux!

View post
Collapse
 
sergelerner profile image
Serge Lerner •

Great piece!

I've switched from Redux to Apollo myself some time ago, and like it quite much! But recently with Apollo 3 I've stumbled upon a use case where in my local-only field I'd wish to return multiple reactive vars. In other words: keep my local-only fields minimal, and derive data from multiple reactive vars.

For example:

    something: {
      read() {
        return {
          a: aVar(),
          b: bVar()
        };
      }
    },
Enter fullscreen mode Exit fullscreen mode

The issue with this is that it creates a new reference on every read, therefore makes it hard working with React, since it always fails on shallow comparison based on reference when used with useEffect dependency array for example.

When I used to work with Redux, where you are also encouraged to keep your store state minimal, and derive data from the state as needed, you have the same issue. But there was another layer, a lib called Reselect, which memoized all your derived state. Hence passes a stable reference to React, until one of its memoization function inputs changed.

After some thought. Where I considered both various deep compare solutions and memoization at different stages. I ended up introducing Reselect to my Apollo 3 workflow, now I can derive data from state at ease and not worry about references and shallow comparison, plus optimize for performance. The downside its quiet verbose… but looks like its either you write more code or more code runs (with some performance impact) on your behalf 🙃

If you have any other experience with such use case, I would love to hear!

Collapse
 
filipleonard profile image
FilipLeonard • • Edited

Hi @sergelerner! Do you have an update on using Apollo Client 3 + Reselect? Does it scale well?

I am in the process of migrating state management from Redux to Apollo and noticed the following:

const store = makeVar({ age: 42, planet: "Earth"});

function someComponent () {
  const { age } = useReactiveVar(store);

  return <h1>Jane is {age} years old</h1>;
}

// this does not trigger a rerender
store({ age: 42, planet: "Earth"});

// this triggers a rerender, as expected
store({ age: 43, planet: "Earth"});

// this also triggers a rerender, not ideal since I don't use planet in the component. (Assume age has still the initial value of 42).
store({ age: 42, planet: "Mars"});
Enter fullscreen mode Exit fullscreen mode

I understand I can use Reselect somehow to solve this unnecessary rerendering but then if I use Reselct, and also if I bring in Immer to be able to mutate state directly, I'm wondering, is it really worth it to switch from Redux to AC3? Thanks!