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

[nethalayaswanth]

trafficstars

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