dezmou / useRender

The React Hook that you shamefully dream of having

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 object
const state = {
  buttonClicked: 0,
}

// Use the state in some component
function LeftMenu() {
  
  const render = useRender()
  
  return <>
    {state.buttonClicked}<br />
    <button onClick={() => {
      
      // change some of your global state values
      state.buttonClicked += 1;
      
      // Manual render !
      render()

    }}>click me</button>
  </>
}

Want to render some component from anywhere in your app ?

import { render, useRender } from './useRender';

const state = {
  someValue: 0,
}

// Use the state in some component
function LeftMenu() {
  
  // register LeftMenu for render call outside the component
  useRender("LeftMenu")
  
  return <>
    {state.someValue}
  </>
}

// Then somewere in your code, change the global state
state.someValue = 1
// Render the component you want
render("LeftMenu")