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

Es wird keine Datei oder kein Test genannt. Beginne damit, die dokumentierten Muster für useReducer, useContext, useState und useDispatch zu prüfen, und ermittle anschließend, ob ein StateRef-Provider und ein useStateRef-Hook zum Projekt passen; für den Abschluss wären ein abgestimmtes Design, eine dokumentierte Verwendung und alle entsprechenden Beispiele oder Tests erforderlich.