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

Không có tệp hoặc bài kiểm thử nào được nêu tên. Hãy bắt đầu bằng việc xem xét các mẫu sử dụng useReducer, useContext, useState và useDispatch đã được tài liệu hóa, sau đó xác định xem một StateRef provider và hook useStateRef có phù hợp với dự án hay không; để được xem là hoàn tất, cần có một thiết kế đã được thống nhất, cách sử dụng được tài liệu hóa và mọi ví dụ hoặc bài kiểm thử tương ứng.