Привет. у меня есть локальный стейт массив внутри которого объекты.

Question

Привет. у меня есть локальный стейт массив внутри которого объекты.

Также есть стейт значение инпута. Также форма по добавлению нового комментария. Также есть код, который рендерит эти комментарии:
{comments.length ? (
comments.map((item) => {
// здесь нужен useMemo
console.log('update 1')
return (
<Comment key={item.id} comment={item} remove={removeComment} />
)
})
) : (
<Skeleton />
)}

проблема: при КАЖДОМ изменении стейта значение инпута, у меня каждый раз перерисовывается этот массив. то есть я что то пишу в инпута, чтобы добавить комментарий, при этом у меня каждый раз вызывается лог update 1. Как это исправить то ?

https://codepen.io/fatb0yy/pen/KKXxoay?editors=1010

#frontend #javascript #programming #react.js #russian

0

09.01.2022

10 ответов

40 просмотров

Rodion Ramazanov Автор вопроса

Arthur Irgashev
вытащи components.map в отдельный компонент и обер...

спасибо, сейчас буду разбираться !!

0

09.01.2022

Vladimir Kurchatkin

Arthur Irgashev
вытащи components.map в отдельный компонент и обер...

все равно будет

0

09.01.2022

Arthur Irgashev

Vladimir Kurchatkin
все равно будет

не должно, если не будет изменять массив

0

09.01.2022

Vladimir Kurchatkin

Arthur Irgashev
не должно, если не будет изменять массив

но он будет

0

09.01.2022

Мороз Аксёнова

Rodion Ramazanov
спасибо, сейчас буду разбираться !!

Не забудь функцию в useCallback завернуть

0

09.01.2022

Мороз Аксёнова

Rodion Ramazanov
спасибо, сейчас буду разбираться !!

Ту, которая removeComment

0

09.01.2022

Rodion Ramazanov Автор вопроса

Vladimir Kurchatkin
но он будет

я изменяю массив только при добавлении нового коммента: setComments([...comments, { ...comment, id: uuidv4(), date: dateNow }]) а инпут у меня просто управляемый

0

09.01.2022

Rodion Ramazanov Автор вопроса

Мороз Аксёнова
Ту, которая removeComment

хорошо, спасибо за помощь

0

09.01.2022

Rodion Ramazanov Автор вопроса

Arthur Irgashev
вытащи components.map в отдельный компонент и обер...

у меня получилось: const CommentsList = memo(({ comments, removeComment }) => { console.log('2') return ( <TransitionGroup> {comments.map((item) => ( <CSSTransition key={item.id} timeout={380} classNames='comment'> <Comment comment={item} remove={removeComment} /> </CSSTransition> ))} </TransitionGroup> ) })

0

09.01.2022

Arthur Irgashev · Accepted Answer

Arthur Irgashev

вытащи components.map в отдельный компонент и оберни в memo. Не будет перерисовываться

0

09.01.2022

169 похожих чатов

Привет. у меня есть локальный стейт массив внутри которого объекты.

10 ответов

Похожие вопросы