score:17
Accepted answer
ok. so here goes. if you have a simple structure with a parent and 2 children like this:
<parent>
<child/>
<child/>
</parent>
then the sequence of events firing will be:
<parent> componentwillmount()
<parent> render()
, which starts to render children<child> componentwillmount()
of the first child<child> render()
of the first child<child> componentwillmount()
of the second child<child> render()
of the second child<child> componentdidmount()
of the first child (these will start only after the last render in the tree has run)<child> componentdidmount()
of the second child<parent> componentdidmount()
(this one will run only after its last child has runcomponentdidmount
)
you can find a codepen example here.
Source: stackoverflow.com
Related Query
- Sequence of componentWillMount calls in React.js
- How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?
- Prevent react component from rendering twice when using redux with componentWillMount
- Making REST calls from a react component
- React batch updates for multiple setState() calls inside useEffect hook
- How to create API calls in REACT and FLUX
- How to TEST async calls made in componentDidMount that set the state of React Component
- React Hooks: skip re-render on multiple consecutive setState calls
- How to mock API calls made within a React component being tested with Jest
- Correct way to throttle HTTP calls based on state in redux and react
- Unit testing react component that makes ajax calls using JEST
- How can I write a unit test for a react component that calls reduxjs's mapStateToProps?
- Uncaught ReferenceError: regeneratorRuntime is not defined in react 17, webpack 5 while making api calls through actions
- How to test API calls in react using jest and enzyme?
- Use componentWillMount or componentDidMount lifecycle functions for async request in React
- Promise.then is not a function - handling multiple API calls in React
- React Native : Handling Async calls to sqllite db
- componentWillMount for react functional component?
- Server Side React Initial Render causes duplicated async calls
- Wait for multiple async calls to finish before React render
- React hooks equivalent for ComponentWillMount
- How to keep rest api calls in different file in react js
- Unit test method that calls clearInterval with Jest and Enzyme on React
- React : How to stop re-rendering component or making an API calls on router change for the same route
- React map always calls method with data of last element
- React component is making infinite API calls
- Why react calls function in subcomponents event when this subsomponents not rendered?
- React Router calls component constructor when switching routes
- Testing a React Native component's function that is using try/catch and calls Image.getSize
- React - Controlling multiple Ajax Calls
More Query from same tag
- Can't resolve module (not found) in React.js
- Creating Heart shaped progress loader | Reactjs
- Webpack-dev-server showing directory list instead of the app page
- How do I change the style of an element through another element selector with withStyle from materialUI
- Does a React Component require Render props?
- TypeError: Cannot read property 'error' and TypeError: Failed to fetch
- how to access props inside form
- ReactJs, storing user inputs as a new object in an empty array
- Use ternary operator to change className in React
- Why is there a comma in the React import statement?
- How to use global configuraion in react
- Looking for a clever way to render multiple children component dynamically
- Finding a specific field in firestore with an id
- React Router v4 - Dynamic Nested Paths
- Update a single value in redux store
- Can class object be called from React Component Prop?
- Vertically centring a div containing two text areas
- Moving props data to state to generate forms
- Unexpected token syntax error in a stateless function using arrow syntax
- Ant design Area chart - remove canvas margins
- this.props is not a function (shallow rendering)
- useState not updating an array at all
- Cannot read properties of undefined (reading 'DateTime') even I check there is a data in React.js
- Why doesn't useEffect hook work as expected?
- Passing value from a map function to a React component
- How to connect the Redux's store and actions to React's components
- React rails rendering home page view
- Type 'never[]' is not assignable to type 'never'. TS2322 in passing to the value of ContextProvider using createContext Hook
- react getting div clientWidth is returning null in component didUpdate
- Find original source file path from inspect element in dev tools