Idea-[context] StateRef provider instead of state and dispatch in separate hooks

As per docs

const [state, dispatch] = useReducer(reducer,initData);
return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>)

as we separated state and dispatch now we can be sure that the component using only useDispatch doesn't rerender with state update.

additional boilerplate

additional boilerplate in case when a component use both state and dispatch

const state=useState()
const dispatch=useDispatch()

what if a component have to rely on the state only while handling events

const handleClick=()=>{
if(state.open){
...
}
else{
....
}
}

suggesting StateRef provider

const [state, dispatch] = useReducer(reducer,initData);
 const stateRef = React.useRef(state);
  stateRef.current=state // while rendering or preferably in effect

return (
    <StateContext.Provider value={state}>
      <StateRefContext.Provider value={stateRef}>
        <DispatchContext.Provider value={dispatch}>
        {children}
        </DispatchContext.Provider>
      </StateRefContext.Provider>
    </StateContext.Provider>)

export function useState() {
  const state= useContext(StateContext);
 const dispatch= useContext(DispatchContext);
return {state,dispatch}
}

export function useStateRef() {
  const stateRef= useContext(StateRefContext);
 const dispatch= useContext(DispatchContext);
const {stateRef,dispatch}
}

or with memoization

const [state, dispatch] = useReducer(reducer,initData);
const value={state,dispatch}
 const stateRef = React.useRef(state);
  stateRef.current=state // while rendering or preferably in effect
const refValue=useMemo(()=>({stateRef,dispatch}),[])

return (
    <StateContext.Provider value={value}>
      <StateRefContext.Provider value={refValue}>
        /*<DispatchContext.Provider value={dispatch}*/
        {children}
      </StateRefContext.Provider>
    </StateContext.Provider>)

we can use either one of the hooks based on how a component depended on the state

const {state,dispatch}=useState() //for rendering
//                 or
const {stateRef,dispatch}=useStateRef() //for referring state

// based on how a component depended on the state

useStateProvider can be used when a component uses the state and Having dispatch provided with it doesn't do any harm.

useStateRefProvider can be used when a component has to refer to the state in only event handlers. Instead of wrapping a component or prop drilling an event handler corresponding to where a component has been used.
Thus increasing the reusability of the components

If it is wrong or an absolute anti-pattern please correct me, it will help in deepening my understanding

It is my first time writing in github, It`s unintentional if I failed to comply with your contributing guidelines

thank you

Aucun fichier ni test n’est nommé. Commencez par examiner les modèles documentés pour useReducer, useContext, useState et useDispatch, puis déterminez si un fournisseur StateRef et le hook useStateRef conviennent au projet ; la tâche ne serait terminée qu’avec une conception validée, une utilisation documentée et les exemples ou tests correspondants.