Answer to the question.....so basically we are passing the filtered array as the prop to the List Renderer. Because the return type of the expensive function is array (which is passed by reference) whenever on each render the expensiveFunction() is recalculates it creates new array that has different memory address from the original one so since the reference is changed so is the props change even though the new array is exactly same in the value the reference is different. If it were some primitive type like number/boolean etc, the child would not have been re-rendered. We can prevent this unncessary re-render by wrapping the expensive function in useMemo() hook.
React.memo(List) component takes a prop List and when parent function Component re-render, it will rerun the function and it will rerun the expensive function coz it's not under useeffect. after the recompute it will get pass into list component and list component will take a updated props and hence trigger render. In this case useMemo will wrap the expensive function and watch if items and filter prop is receiving the update from it's parent or not.
Hello, Thanks for sharing your very precise, compact videos. So far I understand that component re-render only if State/Props changes( I'm a newbie). But, help me understand how to limit component re-rending, before it receives values from the a useHook. Let me explain: I have a Child-Component with variables 1) state variables, and , 2) authObject( using a hook 'useAuthContext'). When other component updates authObject using DISPTCH on AuthContext, its value changes, and Parent component get the new value of the authObject which passdown to the child-components. But, this child-component renders faster than it receive value of authObject from Parent component. To limit the child-component rendering, I did try using a state variable isLoading under dependency array of useEffect, but no luck so far. Sure, Im missing something. Will appreciate any help in this regards.
Don't have the auth related hook in the child component. If the parent re-renders and passes the auth value to the child, that should be the source of truth for the child.
Hi Thanks for your reply. Can I please contact you via email? it hard to explain here, but in-short, my parent class is wrapped under which provide authObj to the child component. In child component, I read the current value of the authObject by using const {user, userAdDocument} = useAuthContext(); ie by using a hook "useAuthContext()". My issue, child component render faster than getting the value of 'userAdDocument' using useAuthContext(). These variable are 1)user, 2)userAdDocument are neither stateVariable nor Props, and not sure how I handle them.....
Answer to the question.....so basically we are passing the filtered array as the prop to the List Renderer.
Because the return type of the expensive function is array (which is passed by reference) whenever on each render the expensiveFunction() is recalculates it creates new array that has different memory address from the original one so since the reference is changed so is the props change even though the new array is exactly same in the value the reference is different.
If it were some primitive type like number/boolean etc, the child would not have been re-rendered.
We can prevent this unncessary re-render by wrapping the expensive function in useMemo() hook.
Please share the stackoverflow link that you mentioned in the video. Thanks!
Please upload video regularly 🙏
I'm trying :) Have a full time job alongside RUclips. But will still do my best! 👐
React.memo(List) component takes a prop List and when parent function Component re-render, it will rerun the function and it will rerun the expensive function coz it's not under useeffect. after the recompute it will get pass into list component and list component will take a updated props and hence trigger render. In this case useMemo will wrap the expensive function and watch if items and filter prop is receiving the update from it's parent or not.
Where can I find the stackoverflow link that was mentioned in the video?
How Suspense Behind The Scene 🙂 Next Topic
Hello, Thanks for sharing your very precise, compact videos. So far I understand that component re-render only if State/Props changes( I'm a newbie). But, help me understand how to limit component re-rending, before it receives values from the a useHook.
Let me explain:
I have a Child-Component with variables 1) state variables, and , 2) authObject( using a hook 'useAuthContext'). When other component updates authObject using DISPTCH on AuthContext, its value changes, and Parent component get the new value of the authObject which passdown to the child-components. But, this child-component renders faster than it receive value of authObject from Parent component.
To limit the child-component rendering, I did try using a state variable isLoading under dependency array of useEffect, but no luck so far. Sure, Im missing something. Will appreciate any help in this regards.
Don't have the auth related hook in the child component. If the parent re-renders and passes the auth value to the child, that should be the source of truth for the child.
Hi Thanks for your reply. Can I please contact you via email? it hard to explain here, but in-short, my parent class is wrapped under which provide authObj to the child component. In child component, I read the current value of the authObject by using const {user, userAdDocument} = useAuthContext(); ie by using a hook "useAuthContext()". My issue, child component render faster than getting the value of 'userAdDocument' using useAuthContext(). These variable are 1)user, 2)userAdDocument are neither stateVariable nor Props, and not sure how I handle them.....
I can't understand your accent.
thanks for videos, and please mute the background music. thanks