Home
Basics
Introduction Setting up environment First Component JSX Component lifecycle Class Based Components Function Based Components Props State Hooks useState hook useEffect hook Events Server requests CSS in React Router third party JavaScriptAdvanced
useContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and ReduxMiscellaneous
React Third Party Components Html templates in React React Interview QnAReact component lifecycle
React component has specific phases as mentioned below.- Mounting phase
- Updating phase
- Unmounting phase
- Error Handling phase
Mounting phase
This is the phase where component is rendered for the first time on page.- constructor() - This method gets executed once component is created and executed before component is mounted in DOM
- static getDerivedStateFromProps() - This method replaces old method componentWillReceiveProps and used to update the state.
- render() - This method gets called to mount the component.
- componentDidMount() - After render method execution is completed, component is mounted and then componentDidMount() method gets called.
Updating phase
This is the phase when component re-renders due to change in state or props. Remember that call to setState() does not mean that it will re-render the component.- static getDerivedStateFromProps()
- shouldComponentUpdate() - We can control here if component should be rendered or not. If this method returns true, component will be re-rendered.
- render()
- getSnapshotBeforeUpdate() - Stores the previous state of component before update
- componentDidUpdate() - gets called after component is re-rendered/updated.
Unmounting phase
This phase has just one lifecycle method - componentWillUnmountError phase
- static getDerivedStateFromError()
- componentDidCatch()
Web development and Automation testing
solutions delivered!!