How does this library compare to unstated-next ?

[justingrant]

@jamiebuilds's unstated-next library seems to address similar use-cases as this library: the ability to have multiple values inside a context object and to have control over which of those values trigger a re-render.

What are the pros and cons of the approach taken by this library vs. unstated-next?

[dai-shi]

@justingrant The way unstate-next suggests is a pure React way: Create multiple contexts. I don't think they have multiple values inside a single context. Where do you find that description?

Even if there is a library that keeps several values in multiple/single context, there's a use case where selector works better. Selector interface is very powerful, and it can do something like this:

const isYoung = useContextSelector(ctx, s => s.person.age < 10); // it won't trigger a re-render if `age` is changed from `5` to `6`.

[justingrant]

@dai-shi - I was thinking of the way that you can put multiple methods and/or properties into an unstated-next Container. Like this:

function useCoordinates() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const getRadius = useCallback(() => Math.sqrt(x*x + y*y), 
    [x, y]
   );
  const setCoordinates = useCallback((newX, newY) => { 
    setX(newX);
    setY(newY);
  }, [x, y]);
  return ({
    x,
    setX, 
    y, 
    setY, 
    setCoordinates, 
    getRadius,
  });
}
export const FooContainer = createContainer(useFoo);

But I think I also see what you mean, because in my example above there's not a good way to say "only re-render if x changes but not if y changes. Is that the essence of the difference that you mean?

[dai-shi]

@justingrant Yes, in your example, if x changes and y doesn't change, a component that only use y will also re-render.

useContextSelector solves it with a proper selector.
useTrackedState in react-tracked solves it without any selector.

I can create some examples if you like.

[dai-shi]

Closing this. Feel free to re-open it for further discussion.