Блог

У меня проблема с повторным рендерингом react.

В принципе, у меня есть список из 100 записей, которые на самом деле являются разделами, содержащими дополнительные HTML-элементы. При изменении одной опоры, которая не влияет ни на одну из записей, все они, похоже, перерисовываются, вызывая некоторые скачки или задержки по всей странице.

 const upperComponent = () => {
    ...some logic
    return (<ExampleList tabs={tabs} content={content}/>)
 

Вкладки изменятся, но это не повлияет на список из 100 записей, который всегда будет одним и тем же, независимо от » вкладок

 const exampleList = ({tabs, content}) => {
    ...some logic here with tabs
    ...return is unaffected by tabs
    return
     (<div....<div....<more divs and spans...)
 

Каждый раз, когда вкладки меняются, выводится результат, и этого я хочу избежать

Я попробовал следующее:

 const exampleList = React.Memo(({tabs, content}) => {
    ...some logic here with tabs
    ...return is unaffected by tabs
    return
     (<div....<div....<more divs and spans...), function(prevProps, nextProps) {
    if (prevProps.content !== nextProps.content) return true
    return false
}
 

Но, похоже, в этом случае компонент вообще не будет отображаться

Что я вообще делаю не так?