This was better than most other explanations. A big confusion I see is when people think it prevents a rerender. It does not. It merely keeps a functions referential equality the same between renders, unless a dependency changes. In your example, for ex, the child component still rerenders when you hit the other button.
Yes, you usually (maybe always) *could* structure your code in such a way in which you do not need to pass a function as a prop. But sometimes it's better. For example: let's say we have a component, which should pull data from an API when first rendered. Our app is a banking app with 2 lists on the UI, one for deposits and one for withdrawals. We *could* write two lists, one which hard-codes making an API call to get your deposits and another which makes an API call to your withdrawals. But this would violate the don't repeat yourself principle, since the UI and styling would be the same for each List component. Instead it's pretty clear that the better solution is to create a single component, which takes in a prop of "getData()" as a function. Then the logic within List is to call the getData() function and display the results. In our parent component we can now have and
This was better than most other explanations. A big confusion I see is when people think it prevents a rerender. It does not. It merely keeps a functions referential equality the same between renders, unless a dependency changes. In your example, for ex, the child component still rerenders when you hit the other button.
It *can* prevent a rerender, if the child component is wrapped in React.memo (which prevents rerenders if props did not change)
Yes and I think it's normal.
In React, when a parent component re-renders, all child components also re-render by default.
Best and simple explanation! Thanks!
Thanks for the explanation, very clear!
Glad you found it useful!
Nice. Straight to the point!
Great explanation! Thank you!
Very clear, thank you!
my nex question is, when would you want to pass a function as a prop. Can you not simply code in such a way to prevent that? Beginner question.
Yes, you usually (maybe always) *could* structure your code in such a way in which you do not need to pass a function as a prop. But sometimes it's better.
For example: let's say we have a component, which should pull data from an API when first rendered. Our app is a banking app with 2 lists on the UI, one for deposits and one for withdrawals.
We *could* write two lists, one which hard-codes making an API call to get your deposits and another which makes an API call to your withdrawals. But this would violate the don't repeat yourself principle, since the UI and styling would be the same for each List component.
Instead it's pretty clear that the better solution is to create a single component, which takes in a prop of "getData()" as a function. Then the logic within List is to call the getData() function and display the results.
In our parent component we can now have and
Thanks!!
too fast. hv no idea what is going on but just flashing of cursor and highlighting.