useStatefulRef

React RefObjects are not stateful, or in other words, changing the current property on the RefObject doesn't trigger a rerender. One can use a ref callback to updated state, but now we are no longer using RefObjects and there is great power in consistency and knowing we will be getting a RefObject every time. useStatefulRef will return a RefObject that can be passed around and used just like any other RefObject, except that changes to the current property will trigger a rerender just like updating state.

Use case

Anytime you want a RefObject that will trigger a rerender when the current property is updated

How to install

npm install @bedrock-layout/use-stateful-ref

Basic usage

const App = () => {
  const ref = useStatefulRef(null);
  //... Use the ref object will trigger a rerender
  return <Div ref={ref}>{...content}</Div>;
};

Storybook

Checkout storybook for more details.