Пост Контроль компонентов через URL

Контроль компонентов через URL Интерактивный пост в блоге как сделать поле поиска в таблице, чтобы запрос сохранялся в URL. В примере иллюстрируется распространенный анти-паттерн, когда пытаются синхронизировать стейт поиска и URL. Правильный паттерн в таком примере использовать URL как источник истины и отказаться от стейта. Это связано с тем, что URL находится вне нашего контроля, и пользователь может сам его изменять. Поэтому использование стейта и useEffect для синхронизации будет приводить к багам. Пример использования URL как источника истины: export default function Home() { let searchParams = useSearchParams(); let search = searchParams.get('search') ?? ''; /* ... */ return ( <> {/* ... */} <Input value={search} onChange={(e) => { let search = e.target.value; if (search) { router.push(`${pathname}?search=${search}`); } else { router.push(pathname); } }} placeholder="Find someone..." /> </> ); } https://buildui.com/posts/how-to-control-a-react-component-with-the-url