Selectors?

[anirban09]

How would one go about adding selectors to a container?

For example, if a component wanted to use only the count variable from this container, it shouldn't re-render when anotherCount is changed.

function useCounter(initialState = 0) {
  let [count, setCount] = useState(initialState);
  let [anotherCount, setAnotherCount] = useState(initialState);

  let decrement = () => setCount(count - 1);
  let increment = () => setCount(count + 1);

  let decrementAnother = () => setAnotherCount(anotherCount - 1);
  let incrementAnother = () => setAnotherCount(anotherCount + 1);

  return { count, decrement, increment, anotherCount, decrementAnother, incrementAnother };
}

let Counter = createContainer(useCounter);

[w10036w]

"selector" is designed for solo-store solutions like redux, since they need to avoid rerendering for unaffected nodes.

For multi-store case, you'd better have another container if these states are irrelevant.
To prevent unexpected rerendering, check memo or useMemo.
As well you can expose the setter/reducer of one store so you can dispatch the actions, triggered by the change of another store state, inside your component logic

[anirban09]

There do seem to be some solutions about using only part of what useContext returns in this comment.

[anirban09]

I see that there's documentation in the README for this, under the "Optimizing components" section. Was that not there before, or did I miss it earlier? 😅
Anyway, closing this then.