# How to Be Better in React Code Reusability Part 1 ## TL;DR Custom hooks are the primary mechanism for reusability in 2026 React. Extract stateful logic into hooks, use component composition with `children` and slots for flexible layouts, and leverage headless UI libraries like Radix UI for unstyled, accessible components. Storybook 9 lets you document and test these patterns visually, with built-in component testing and accessibility checks. ## Introduction Code reusability is one of React's core promises, but it's easier to talk about than achieve. You can copy-paste JSX, create wrapper components, or wrap everything in higher-order components—but none of these approaches truly scale. React has evolved beyond those patterns. In 2026, reusability in React means thinking about **logic extraction** through custom hooks, **visual flexibility** through composition, and **behavioral control** through headless UI libraries. This guide focuses on Part 1: the fundamental techniques you need to write DRY React code that's maintainable and testable. ## Custom Hooks: The Primary Reuse Mechanism Custom hooks are JavaScript functions that use React hooks internally. They encapsulate stateful logic so you can reuse it across components without duplicating code. **Why custom hooks beat other patterns:** - No component hierarchy pollution (unlike HOCs) - No "prop drilling" (unlike render props) - No wrapper component overhead - Easy to compose multiple hooks in one component - Easy to test in isolation ### Building Your First Custom Hook Let's extract form handling logic into a reusable hook: ```jsx // useForm.js import { useState } from 'react'; export function useForm(initialValues, onSubmit) { const [values, setValues] = useState(initialValues); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); const handleChange = (e) => { const { name, value } = e.target; setValues(prev => ({ ...prev, [name]: value })); }; const handleSubmit = async (e) => { e.preventDefault(); setIsSubmitting(true); try { await onSubmit(values); } catch (error) { setErrors({ submit: error.message }); } finally { setIsSubmitting(false); } }; return { values, errors, isSubmitting, handleChange, handleSubmit, }; } ``` Now any component can use this: ```jsx import { useForm } from './useForm'; export function LoginForm() { const { values, handleChange, handleSubmit, isSubmitting } = useForm( { email: '', password: '' }, async (data) => { const response = await fetch('/api/login', { method: 'POST', body: JSON.stringify(data) }); if (!response.ok) throw new Error('Login failed'); return response.json(); } ); return ( ); } ``` ### Common Custom Hook Patterns **useAsync** — for data fetching: ```jsx function useAsync(asyncFunction, immediate = true) { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(immediate); const execute = useCallback(async () => { setLoading(true); try { const result = await asyncFunction(); setData(result); setError(null); } catch (err) { setError(err); } finally { setLoading(false); } }, [asyncFunction]); useEffect(() => { if (immediate) execute(); }, [execute, immediate]); return { data, error, loading, execute }; } ``` **useLocalStorage** — for persistent state: ```jsx function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch { return initialValue; } }); const setValue = (value) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); window.localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { console.error(error); } }; return [storedValue, setValue]; } ``` ## Component Composition with `children` and Slots Composition lets you build flexible, reusable UI without prop explosion. Instead of creating variants for every use case, build composable building blocks. ### The `children` Pattern ```jsx // Reusable Card component — doesn't know what it contains export function Card({ children, title }) { return (

{title &&

{title}

} {children}

); } // Reuse for anything export function UserCard({ user }) { return (

{user.email}

); } ``` ### The Slots Pattern (Advanced) When you need more control over placement, use named slots: ```jsx // LayoutComponent with multiple insertion points export function PageLayout({ header, sidebar, main, footer }) { return (

{header}

{main}

); } // Usage } sidebar={} main={} footer={

} /> ``` This is more flexible than building a monolithic component with dozens of optional props. ## Headless UI Libraries: Radix, Ark UI, and React Aria Headless UI libraries provide unstyled, accessible components. You get behavior and accessibility for free and style them however you want. ### Radix UI Example ```jsx import * as Dialog from '@radix-ui/react-dialog'; import * as Select from '@radix-ui/react-select'; export function UserSettingsDialog() { return ( User Settings English Arabic ); } ``` Radix handles: - Keyboard navigation (Tab, Escape, Arrow keys) - Focus management - ARIA attributes - Click-outside detection - Animation hooks You provide styling via CSS-in-JS, Tailwind, or CSS modules. ### React Aria (from Adobe) React Aria provides hooks for building accessible components: ```jsx import { useButton } from 'react-aria'; import { useToggleState } from 'react-stately'; function MyButton(props) { let state = useToggleState(props); let ref = useRef(null); let { buttonProps } = useButton( { onPress: () => state.toggle(), ...props, }, ref ); return ( ); } ``` Ark UI, maintained by the Chakra UI team, is another headless option in the same category — its components are unstyled and built on top of Zag.js state machines, with the same React/Solid/Vue/Svelte parity as a single API. If you already use the Chakra ecosystem, Ark gives you the unstyled foundation while staying compatible with Chakra's styled layer on top. ## Storybook 9 for Component Documentation Storybook isolates and documents your components. It's invaluable for building a component library and testing reusability. ### Basic Setup ```typescript // Button.stories.ts import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta = { component: Button, tags: ['autodocs'], argTypes: { onClick: { action: 'clicked' }, }, } satisfies Meta; export default meta; type Story = StoryObj; export const Primary: Story = { args: { children: 'Click me', variant: 'primary', }, }; export const Secondary: Story = { args: { children: 'Secondary button', variant: 'secondary', }, }; export const Disabled: Story = { args: { children: 'Disabled', disabled: true, }, }; ``` Run `npm run storybook` to see all variants interactively. You can test accessibility, responsive behavior, and state changes without touching your app. ## Combining Patterns: A Real-World Example Here's how these patterns work together: ```jsx // 1. Custom hook for business logic function usePaginatedData(url) { const [page, setPage] = useState(1); const { data, loading } = useAsync(() => fetch(`${url}?page=${page}`).then(r => r.json()) ); return { data, loading, page, setPage }; } // 2. Headless component for reusability function DataTable({ columns, rows, onRowClick }) { return ( {columns.map(col => )} {rows.map(row => ( onRowClick(row)}> {columns.map(col => )} ))}

{col}
{row[col]}

); } // 3. Composition at the page level export function UserListPage() { const { data: users, loading, page, setPage } = usePaginatedData('/api/users'); return ( {loading ?

: ( <> console.log(user)} /> )} ); } ``` Each layer is independent, testable, and reusable. ## Key Takeaways Reusability in React is not about building massive component libraries—it's about thinking in layers: 1. **Extract logic** into custom hooks when you find yourself repeating state management or side effects 2. **Compose primitives** using `children` and slots instead of building monolithic components 3. **Use headless libraries** for complex interactive components (modals, dropdowns, date pickers) 4. **Document with Storybook** so you can see all your variants and test accessibility 5. **Test hooks independently** with `@testing-library/react` This approach scales from small projects to design systems. The flexibility comes from composition, not configuration.

#design-patterns

How to be Better in React Code Reusability Part1

Stay on the Nerd Track