Main component:
const AProfileFilter = ({ data = []) => {
const [getData, setData] = useState([]);
const [getStore, setStore] = useState([]);
useEffect(() => {
setData(prepareFilterData(data));
}, [data]);
useEffect(() => {
setStore({ "addMoreOptions": getData.filter((flr) => flr.isShow === false), "displayFields": getData.filter((flr) => flr.isShow === true) })
}, [getData]);
// AProfileFilter logic here
// (getStore) addMoreOptions state will be update based on some condition.
return <ASelect defaultValues={getStore.addMoreOptions}>
}
export default ZListingProfileFilter;
Sub Component:
const ASelect = (props) => {
// ASelect logic here
}
function areEqual(prevProps, nextProps) {
console.log("prevProps > ",prevProps.defaultValues, "nextProps > ",nextProps.defaultValues);
return _.isEqual(prevProps.defaultValues, nextProps.defaultValues);
}
export default memo(ASelect, areEqual);
Current Result:
Expected Result:
- Initially it fine to have (Blank Array) [] and then update it to (Filled Array) [{...}]
- Second time I want previous should be (Filled Array) [{...}] and update one should be (Blank Array) [], because I have made it as blank from AProfileFilter component.