React.useMemo doesn't prevent re-rendering - reactjs

Question

I have a functional component UserInfoInput and another functional component UserInfo including many UserInfoInput components. Here my code:
const UserInfoInput = React.memo((props) => {
useEffect(() => {
console.log('changed ');
})
return (
<View style={styles.container} >
<View style={{ ...styles.iconContainer, backgroundColor: props.color }}>
{props.name ? <Icon type={props.type} name={props.name} size={props.size} color='white' /> :
<Image source={props.image} style={props.imageStyle} />}
</View>
//input goes there
<TextInput style={styles.input} placeholder={props.title} onChangeText={props.changeText} />
{props.divider && <View style={{ ...RootStyle.divider, position: 'absolute', width: '85%', bottom: 0, right: 5 }}></View>}
</View>
)
});
and UserInfo component:
const [text, setText] = useState('');
const [second, setSecond] = useState('');
const update = text => setText(text);
const updt = text1 => setSecond(text1);
return (
// <UserMenu />
<View style={{ flex: 1 }}>
<View style={styles.navigator}>
</View>
<View style={styles.inputList}>
<UserInfoInput name="bookmark" color='#FF6C88' type='font-awesome' size={18} title={UserMenuTitle.bookmark} divider={true} changeText={update} />
<UserInfoInput name="star" color='#8BD8FB' type='font-awesome' size={18} title={UserMenuTitle.achieve} divider={true} changeText={updt} />
...
</View>
</View>
Whenever I enter one of those inputs, both two UserInfoInput components still re-render even I already wrap it inside React.memo function. I want my UserInfoInput component only re-render when I enter exactly it, not from other UserInfoInput components but I don't know how to do it. Could anyone help me to solve this problem ?

Answer 1

According to react official docs:
By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.
This is the reason why your component is re-rendering again.
What you can do pass custom callback function and check your self:
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
// prevProps.title===nextProps.title(add your condition return true if values are equal. It ensure it will not re-render again)
}
const UserInfoInput = React.memo((props) => {
useEffect(() => {
console.log('changed ');
})
return (
<View style={styles.container} >
<View style={{ ...styles.iconContainer, backgroundColor: props.color }}>
{props.name ? <Icon type={props.type} name={props.name} size={props.size} color='white' /> :
<Image source={props.image} style={props.imageStyle} />}
</View>
//input goes there
<TextInput style={styles.input} placeholder={props.title} onChangeText={props.changeText} />
{props.divider && <View style={{ ...RootStyle.divider, position: 'absolute', width: '85%', bottom: 0, right: 5 }}></View>}
</View>
)
},areEqual);