React doesn't provide an API witch is doing some side affects from top to bottom.

Do you want to request a feature or report a bug? feature

What is the current behavior? The current version of react requires lifecycles constructor and render must be pure functions and don’t do any side affect. We can only do side affects in componentDidMount.

But it’s unfriendly with some frameworks which have got to memorize the order from ancestor component instance to child component instance.

In other words, it’s like topological sort. Even you can reverse array to achieve this goal, But it’s impossible to distinguish what’s the end of this array because react doesn’t provide an API to let framework knows the rendering is done.

componentDidMount are always called from child instance to ancestor instance, so react is missing an approach which is doing side affects from top to bottom.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below: https://codesandbox.io/s/wk57nm7rm5 /src/rako-react/prop.js line: 78

What is the expected behavior?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? It can work properly in sync rendering if you do side affect in constructor, but it would cause unexpected result(memory leak) in async rendering because a node may be rendered multiple times.

[tonai]

Thanks @malerba118 for your example.

In fact it would be great if getDerivedStateFromProps could have access to the next and prev values for props and state (as previous API componentWillUpdate did).

To me getDerivedStateFromProps seems more like a regression of the API since it enforce you to do some trick, like copying props into the state, o achieve what you want…

[rabbitooops]

Seems it’s impossible to provide such API because its usage scenario is limited, but I think a hook React.didRender which is making other frameworks to perceive a rendering is done is necessary.

In addition, React.beforeRender for doing some initialization. They can be simplify to one API like useEffect.

React.subscribeRender(() => {
  // beforeRender
  return () => {
    // didRender
  }
})

I think React is not flexible enough because it doesn’t provide enough hooks APIs for more lower-level developers.

I am tired and not going to develop for react, close it.