AdvanceduseContext hook useRef hook useReducer hook Memo useCallback hook Custom Hooks React and Redux
MiscellaneousReact Third Party Components Html templates in React React Interview QnA
React component lifecycleReact component has specific phases as mentioned below.
- Mounting phase
- Updating phase
- Unmounting phase
- Error Handling phase
Mounting phaseThis 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 phaseThis 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.
- getSnapshotBeforeUpdate() - Stores the previous state of component before update
- componentDidUpdate() - gets called after component is re-rendered/updated.
Unmounting phaseThis phase has just one lifecycle method - componentWillUnmount
- static getDerivedStateFromError()
Complex problems, Simple Solutions