Bedrock Layout Primitives Home
Edit page
AppBoundaryCSS-ResetCenterColumnsCoverFrameGridInlineClusterPadBoxReelSpacing ConstantsSplitStackSwitcheruseContainerQueryuseForwardedRefuseMatchContainerSizesuseMatchMediauseMediaQueryuseStatefulRefUse caseHow to installBasic usageStorybook
HomeInspirationLayout PrimitivesRegarding IE11Why Styled Components?


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>;


Checkout storybook for more details.