Топ 3 джентльменских хука для React разработчика на галере

Некоторое время назад я был вынужден ковыряться в legacy, оставленным ушедшим разработчиком. Добавление фичи в код было хирургической операцией, которая легко могла сломать жизнеспособность страницы. Из-за нагроможденных useEffect с связями между собой, скорее всего, под конец, как работает код не понимал и сам автор. На проекте не было линтера

Мне очень помогли следующие хуки и сделанные по аналогии

1. useListEditor()

Хук, который можно использовать для обработки редактирования списка элементов. Позволяет сразу получить уже собранный массив в коллбеке onChange, что упрощает применение изменений из списка

import { useListEditor } from "react-declarative";  export const EditableList = () => {   const {      onRemoveItem,     onUpdateItem,     onAddItem,     render,   } = useListEditor(     (id, item) => (       <>         <span>{`Label: ${item.label}`}</span>         <span>{`Value: ${item.value}`}</span>         <button           onClick={() =>             onUpdateItem(id, {               label: prompt("label", item.label),               value: prompt("value", item.value)             })           }         >           update         </button>         <button onClick={() => onRemoveItem(id)}>remove</button>       </>     ),     {       initialValue: [         {           label: "foo",           value: "bar"         }       ],       onChange: (items) => console.log(items)     }   );    return (     <>       <button         style={{           marginBottom: 5         }}         onClick={() =>           onAddItem({             label: "fiz",             value: "baz"           })         }       >         Add item       </button>       <div         style={{           display: "grid",           gridTemplateColumns: "1fr 1fr auto auto",           gridColumnGap: 5,           gridRowGap: 5,           maxWidth: 300         }}       >         {render()}       </div>     </>   ); };  export default EditableList; 

Посмотреть код хука useListEditor можно тут

2. useModalDialog()

Хук, который позволяет вывести модальное окно с привязкой к состоянию компонента. Дочернее древо элементов рисуется в <ModelProvider>, который можно разместить в App или другом нижестоящем компоненте

import { useState } from "react";  import { useModal } from "react-declarative";  export const ModalDialogExample = () => {   const [value, setValue] = useState(1);    const { showModal, hideModal } = useModal(     () => (       <div>         Sample modal with value {value}       </div>     ),     [value]   );    return (     <>       <button onClick={showModal}>Show modal</button>       <button onClick={hideModal}>Hide modal</button>       <button onClick={() => setValue(value + 1)}>Increment</button>     </>   ); };  export default ModalDialogExample;

Посмотреть код хука useModalDialog можно тут

3. useActualCallback()

Позволяет достучаться до актуальной ссылки на коллбек из useEffect даже если функция не указана в зависимостях или не все состояния, используемые в функции, есть в зависимостях эффекта

Казалось бы, при открытии формы должен появиться alert() с содержимым {never: null}, однако, внутри коллбека значение initNotComplete всегда будет актуальным

import { useState, useEffect, useLayoutEffect } from "react";  import { useActualCallback } from "react-declarative";  export const ActualCallbackExample = () => {   const [initNotComplete, setInitNotComplete] = useState(true);    const [filterData, setFilterData] = useState({     never: null   });    const handleChange = useActualCallback(() => {     if (!initNotComplete) {       alert(JSON.stringify(filterData, null, 2));     }   });    useEffect(() => {     handleChange();   }, [filterData]);    useLayoutEffect(() => {     setInitNotComplete(false);   }, []);    return (     <button       onClick={() =>         setFilterData({           foo: "bar"         })       }     >       Update filterData     </button>   ); };  export default ActualCallbackExample; 

Посмотреть код хука useActualCallback можно тут

Спасибо за внимание!

Искренне надеюсь, что рассмотренные хуки помогут вам добавлять фичи в легаси ничего не сломав)