More complex examples or good/bad practices documented

Hey! Awesome work! I hope it’s gonna be a part of React 🤞.

To be precise: I’m not raising issue, rather feature request - could you please extend documentation or add more complex examples? Especially part about good/bad practices. For example how to access function/objects stored in context because those must have same reference in order to skip update. Example - component is getting function from context:

const addListener = useContextSelector(
    ListenerContext,
    listeners => listeners.addListener
)

Provider looks like:

const [listeners, setListeners] = useState([])
const [state, setState] = useState({}) // some other state
const addListener = (listener) => {
    // some complex logic 
    setListeners(newListeners)
}

const state = {
    state,
    addListener,
}

return (
    <Provider value={state}>
        {children}
    </Provider>
)

Therefore as compare condition is:

(ref.current.v === nextValue || Object.is(ref.current.s, ref.current.f(nextValue)))

Update will be triggered. However it might be fixed by useRef:

const { current: addListener } = useRef((listener) => {
    // some complex logic 
    setListener(newListeners)
})

I think there are more examples of how to use/how to not use this hook and it might be helpful to document it.

Cheers!

[JoviDeCroock]

I have converted to my own event emitter for the React warning and performance when using 1000+ useContextSelectors. This also gave some size advantages for me, I’ll answer with how I used it here tomorrow.

[dai-shi]

Closing this. Please open a new issue for further discussion.