The React Hook that you shamefully dream of having
TypeScript
React useRender
Did you ever tell yourself : ok react, I'm fed up with all these asynchronous setState, redux, context, prop drilling and company to update the reactive variables in the html.
You know what ? just give me a render() function to tell the component that it should update and I will be fine.
import{useRender}from'./useRender';// Create your global state as simple as a damn objectconststate={buttonClicked: 0,}// Use the state in some componentfunctionLeftMenu(){constrender=useRender()return<>{state.buttonClicked}<br/><buttononClick={()=>{// change some of your global state valuesstate.buttonClicked+=1;// Manual render !render()}}>click me</button></>}
Want to render some component from anywhere in your app ?
import{render,useRender}from'./useRender';conststate={someValue: 0,}// Use the state in some componentfunctionLeftMenu(){// register LeftMenu for render call outside the componentuseRender("LeftMenu")return<>{state.someValue}</>}// Then somewere in your code, change the global statestate.someValue=1// Render the component you wantrender("LeftMenu")