progway — программирование, IT

Страшные рефы

Есть код:

const items = [1, 2, 3, 4];
const itemRefs: React.RefObject<HTMLDivElement>[] = items.map(() =>
  useRef(null),
);

// и далее в вёрстке
ref={itemRefs[index]}

Как сделал бы я:

// вынести из компонента
const items = [1, 2, 3, 4];

// внутри компонента
const itemRefs = useRef([])

// и внутри вёрстки
// index берется из .map, так как элементы на 
// страницу вставляются из списка
ref={element = inputRef.current[index] = element}

Цитата из доки реакта: “Не вызывайте хуки внутри циклов, условных операторов или вложенных функций. Вместо этого всегда используйте хуки только внутри React-функций, до возврата какого-либо значения из них.”. Если это правило не соблюдать, то можно самых странных ошибок огрести.

Подробнее в официальном руководстве

@prog_way_blog — #react #review

🔥11🐳9❤2🤔1

www.tgoop.com/prog_way_blog/244

1.54K viewsedited  Apr 26, 2024 at 11:07

Страшные рефы

Есть код:

const items = [1, 2, 3, 4];
const itemRefs: React.RefObject<HTMLDivElement>[] = items.map(() =>
  useRef(null),
);

// и далее в вёрстке
ref={itemRefs[index]}

// вынести из компонента
const items = [1, 2, 3, 4];

// внутри компонента
const itemRefs = useRef([])

// и внутри вёрстки
// index берется из .map, так как элементы на 
// страницу вставляются из списка
ref={element = inputRef.current[index] = element}

BY progway — программирование, IT