React Design Patterns
Custom hooks are React's primary way to share stateful behavior. However, calling them directly at the root of a large page component forces the entire page to re-render whenever the hook updates. The Hook Wrapper Pattern compiles hooks into reusable components to isolate re-render performance.
Standard Call Pattern
Invoke hooks directly at the root of your component. Easy to write and straightforward for simple components, but ties the entire component's lifecycle to the hook's state transitions.
Code Snippet
function MyComponent() {
// Triggers full re-render on state change
const { count, inc } = useCounter({ step: 1 });
return (
<div>
<button onClick={inc}>Add {count}</button>
<HeavyComponent />
</div>
);
}Wrapper Pattern
Wrap your custom hook with wrap() or useHook() to create a container component. This isolates state updates to the sub-tree under the render prop, avoiding top-level parent re-renders.
Code Snippet
import { useHook } from '@bemedev/hook-wrapper';
const CounterWrapper = useHook(useCounter);
function MyComponent() {
// Parent doesn't re-render when counter changes!
return (
<CounterWrapper
step={1}
render={({ count, inc }) => (
<button onClick={inc}>Add {count}</button>
)}
/>
);
}Credits
Install the package directly, view bundle size limits, and download statistics on the official npm registry page.
Explore the source code, open issues or feature requests, and contribute to the monorepo hosting this project.
Crafting clean, lightweight, and performance-focused React design patterns and state utilities.
Performance & Capabilities
| Feature / Capability | Standard Hook (Not Wrapped) | Wrapper Component (Wrapped) |
|---|---|---|
| Re-render Scope | Parent Component & Children | Isolated Render-Prop Sub-tree only |
| Class Component Support | Unsupported (React constraint) | Supported (Standard JSX Component) |
| Dynamic / Conditional Invocation | Unsupported (Violates Rules of Hooks) | Supported (Can be mounted conditionally or in loops) |
| State Encapsulation | Leaked to page component scope | Self-contained inside the wrapper instance |
Get Started
@bemedev/hook-wrapper is a lightweight, zero-dependency utility that lets you wrap any React hook into a dedicated component.
This isolates hook lifecycle changes to a localized render-prop sub-tree, avoiding top-level parent component re-renders and boosting UI responsiveness.
pnpm add @bemedev/hook-wrapperImplementation Guide
Write your hook just like any normal React hook, returning states and actions.
import { useState } from 'react';
export const useCounter = ({ step = 1 }: { step?: number } = {}) => {
const [count, setCount] = useState(0);
return {
count,
inc: () => setCount(c => c + step),
};
};Pass your custom hook to the wrap() or useHook() function. Mount the returned wrapper, passing hook parameters as props and rendering the UI.
import { useHook } from '@bemedev/hook-wrapper';
import { useCounter } from './useCounter';
// Wrap hook to get a React Component
const CounterWrapper = useHook(useCounter);
export const Demo = () => (
<CounterWrapper
step={5}
render={({ count, inc }) => (
<div>
<p>Count: {count}</p>
<button onClick={inc}>Increment by 5</button>
</div>
)}
/>
);Signature & API
The core helper exposes a single, straightforward signature to encapsulate your logic.
Both exports are functionally identical. useHook is provided as a semantic alternative for developers preferring standard hook naming conventions.
Parameters
hook: The target React hook function (e.g. useMyHook) you wish to wrap.Returns
A standard React component that is type-safe and takes the following props: