use-controlled-state

Managing controlled / uncontrolled values can be tedious, and maintaining the duplication between stateful and stateless components can be exhausting. use-controlled-state abstracts this pain away into a simple hook.

See this CodeSandbox for an example

Why

Consider a component. In most cases you just want a simple collapsible where you don't have to think about managing state where you use the component

``jsx



`jsx
<>
isOpen={isOpen}
onChange={() => setState(prevIsOpen => !prevIsOpen)}
/>


Common solutions you see for this pattern involve calling the onChange/setState prop in component lifecyles to keep the state in sync. This hook abstracts away the pains of supporting both APIs

`tsx
import { useControlledState } from 'use-controlled-state';

interface Props {
onChange?: (isOpen: boolean) => void;
title: string;
isOpen?: boolean;
children: React.ReactNode;
}

function Collapsible({ onChange, isOpen, title, children }: Props) {
const [isOpenState, setState] = useControlledState(value, onChange);

return (
<>
setState(isOpen => !isOpen)}>
Open the collapsible

{isOpen && children}

);
}
`

Now you can use the component with a controlled and uncontrolled API

`jsx

Content
setState(nextIsOpen)} />

``