3 ms·

I must admit I don't fully understand this, probably need to read your linked articles a bit more in-depth first. But if you say react doesn't need to visit th

I must admit I don't fully understand this, probably need to read your linked articles a bit more in-depth first. But if you say react doesn't need to visit the children because the prop didn't change, you have to also answer the related question: Why does react need to visit the same JSX Element that receives the same props? > To sum up, I don’t see it as a trick at all. Like many react articles before, this really feels like post-hoc rationalization. Getting the react API to be sane and predictable is really hard giving JS's current notion of equality.

knuthsat 6y ago
If expensive component extended React.PureComponent there would be no rerender.
qudat 6y ago
React components are not pure functions. React tries to be declarative but at the end of the day, they couldn’t figure out how to get it to work without adding lifecycle callback functions, event listeners, reactive hooks, and overall dirtying the code with imperative constructs. There are very good reasons for not passing every piece of data through props, but as a result, react components create side-effects, and those side-effects cause components to re-render even when the props don’t change. This is in order to prevent colloquially what we call “prop-drilling” which enables us to dynamically inject props into our react components via hooks. We also need a way to re-render when an event happens inside of a component.
- sfvisser 6y ago
  Sure, but that still doesn’t explain the difference in rerendering between writing down the JSX element as a child or passing it in via props.
  - knuthsat 6y ago
    That JSX element is a function call, not a class that has a render method. If that <ExpensiveComponent /> was a `class ExpensiveComponent extends React.PureComponent { render() { ... } }` it would not be an issue because diff algorithm can step in. I think people are just recognizing that all of this stuff can be optimized away by a proper compiler and this will soon be done. Nothing stops anyone from figuring out the dependencies and doing proper rerenders without diffing algorithms running on every change.
    - deleted 6y ago
      [deleted]

knuthsat 6y ago

If expensive component extended React.PureComponent there would be no rerender.

qudat 6y ago

React components are not pure functions. React tries to be declarative but at the end of the day, they couldn’t figure out how to get it to work without adding lifecycle callback functions, event listeners, reactive hooks, and overall dirtying the code with imperative constructs. There are very good reasons for not passing every piece of data through props, but as a result, react components create side-effects, and those side-effects cause components to re-render even when the props don’t change. This is in order to prevent colloquially what we call “prop-drilling” which enables us to dynamically inject props into our react components via hooks. We also need a way to re-render when an event happens inside of a component.

sfvisser 6y ago
Sure, but that still doesn’t explain the difference in rerendering between writing down the JSX element as a child or passing it in via props.
- knuthsat 6y ago
  That JSX element is a function call, not a class that has a render method. If that <ExpensiveComponent /> was a `class ExpensiveComponent extends React.PureComponent { render() { ... } }` it would not be an issue because diff algorithm can step in. I think people are just recognizing that all of this stuff can be optimized away by a proper compiler and this will soon be done. Nothing stops anyone from figuring out the dependencies and doing proper rerenders without diffing algorithms running on every change.
  - deleted 6y ago
    [deleted]