'why fast-compare not working but own isEqual function works?
I use memo in my script. I dont know why my data rerenders when I use fast-compare (isEqual) and when I use my own function (isEq) then its not rerender. Why ?
import isEqual from 'react-fast-compare'
function isEq(prev: IColorItem, next: IColorItem) {
if(prev.activeColor === next.activeColor) {
return true;
}
}
// rerenders
const Item = memo(({ color, index, style, activeColor, onPress }: IColorItem) => {
console.log('render');
return (
<Button style={s.center} onPress={() => onPress(color)}>
<Text>{color}</Text>
</Button>
)
// @ts-ignore
}, isEqual);
// No rerender
const Item = memo(({ color, index, style, activeColor, onPress }: IColorItem) => {
console.log('render');
return (
<Button style={s.center} onPress={() => onPress(color)}>
<Text>{color}</Text>
</Button>
)
// @ts-ignore
}, isEq);
€:
Item:
const renderItem: ListRenderItem<ColorsType> = ({ item, index }) => (
<Item
color={item}
index={index}
style={style}
activeColor={activeColor}
onPress={onPress}
/>
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
