react-lifecycle-methods-diagram icon indicating copy to clipboard operation
react-lifecycle-methods-diagram copied to clipboard

"New props" arrow label is misleading

Open stephan-noel opened this issue 5 years ago • 4 comments

Motivation

I realize that the phrase "New props" is in the original tweet of Dan Abramov, but "new props" is vague and misleading. Further, it tends to reinforce the misconception mentioned in Brian Vaughn's blog post that the "Updating" swimlane is triggered only when the props "change" or are "different" ( "new" props suggests "different" from "old" props). As the blog post says "these lifecycles are called any time a parent component rerenders, regardless of whether the props are 'different' from before".

Proposal

Change the wording to say "parent rerenders" or something similar.

Aside

I'm not trying to be picky. Dan's diagram and your project have been infinitely helpful in aiding my understanding, yet I've continuously seen beginner, intermediate, and even some advanced React developers tripped up by this confusion. It's a small change, but if you agree, I can help out and do the PR as well.

stephan-noel avatar Mar 10 '19 10:03 stephan-noel

Agreed. "New props" is confusing and doesn't have any (correct) meaning. "Parent rerenders" give infomation about "why" and "when", just like the "set­State()" and "force­Update()" labels do.

csr632 avatar Mar 18 '19 09:03 csr632

Thanks for your input @csr632 ! In the meantime, I've had a colleague suggest "nextProps". Also, maybe "parent render()" would be preferable to "parent rerenders" to clarify the possible ambiguity between the React lifecycle render() method vs. the browser rendering. Not sure if Dan has any opinion about this...

stephan-noel avatar Mar 21 '19 09:03 stephan-noel

I feel that "parent render()" is perfect.

When I give a course, I use this wording: Render: the method to generate the virtual DOM. (generates a tree structure of React Elements, which are simple js objects). Reconcilation: the React process to update the DOM. (React does this by comparing the current vDOM with the previous one.) Browser paint or Browser refresh: the browser process to show the DOM on the screen.

EricCoteReact avatar Nov 19 '19 23:11 EricCoteReact

Totally agreed! This arrow is very misleading, which confused me for quite a long time...for correctness, as long as parent component rerenders, child components should rerender as well (not if its shouldComponentUpdate returns false)

jeffacode avatar Jan 05 '22 14:01 jeffacode