Ребят, подскажите использую react-window ( может это как-то влияет) меняя один

export default React.memo(PatientTableRowContainer) <List ref={ref} outerRef={outerRef} style={{ width: "100%", ...style}} height={window.innerHeight} itemCount={patientsIds.length} onScroll={onScroll} itemSize={76} width={"100%"} > {({ index, style }: { index: number, style: any }) => ( <PatientTableRowContainer key={patientsIds[index]} {...{ patientID: patientsIds[index], index, style, canReadOnly, position, updateDatepickerPosition }} /> ) } </List>

0

08.01.2021

Timofey Goncharov

PH_cheerokee
так и есть обернул

значит нарушаешь мемоизацию прокидывая объект/массив/стрелочную функцию

0

08.01.2021

Timofey Goncharov

PH_cheerokee
export default React.memo(PatientTableRowContainer...

PatientTableRowContainer должен быть мемоизированным компонентом

0

08.01.2021

Timofey Goncharov

PH_cheerokee
export default React.memo(PatientTableRowContainer...

там style прокидывается. скорее всего это объект который был только что в рендере создан. он и ломает мемоизацию. как я понимаю у тебя тут вартуализация списка, а значит перерндеревиваются не все, а только те что в радиусе видимости. если у тебя строки слишком тяжелые для ререндеринга, попробуй спустить оптимизацию ниже, для чилдренов компонента PatientTableRowContainer

0

08.01.2021

PH_cheerokee Автор вопроса

Timofey Goncharov
там style прокидывается. скорее всего это объект к...

очень странно( сделал так function customFunction(prevProps:any, nextProps:any) { if(!R.equals(prevProps, nextProps)){ return true } return false } export default React.memo(PatientTableRowContainer, customFunction) все равно ререндерит

0

08.01.2021

Timofey Goncharov

PH_cheerokee
очень странно( сделал так function customFunction...

const mapProps = {}; Object .keys(prevProps) .forEach((key) => prevProps[key] !== nextProps[key] ? mapProps[key] = {prev: prevProps[key], next: nextProps[key]} : null ) вот такой код воткни в первую строку функции и законсоль mapProps что бы увидеть кто из пропсов изменяется и мешает мемоизации

0

08.01.2021

Timofey Goncharov

PH_cheerokee
очень странно( сделал так function customFunction...

effector бы тебе сразу дал: 1. переключатель pending true/false 2. возможность мапить данные с сервера (изменять ответ с сервера под нужный формат для вьюшки) 3. расшаривать данные сразу на несколько компонентов если вдруг они там будут нужны 4. перегонять данные в разные сторы если вдруг данные потребовались за пределами определенной области и многое другое

0

08.01.2021

Timofey Goncharov · Accepted Answer

Timofey Goncharov

ну видимо нужно что бы бы каждый из айтемов, был memoизированным компонентом. https://ru.reactjs.org/docs/react-api.html#reactmemo

0

08.01.2021

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

Ребят, подскажите использую react-window ( может это как-то влияет) меняя один

10 ответов

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