React

Lifecycle Methods (Class components)

1. Mounting

   • constructor

     • A special function that will get called whenever a new component is created.
     • Inializing state
     • Binding the event handlers
     • Do not cause side effects
     • supper(props)

   • static getDerivedStateFromProps

     • When the state of the component depends on changes in props over time
     • Set the state
     • Do not cause side effects
   • render
     • Only required method
     • Read props & state and return JSX
     • Do not change state or interact with DOM or make ajax calls
     • Children components lifecycle methods are also executed.
   • componentDidMount
     • Invoked after a component and all its children components have been rendered to the DOM
     • Cause side effect. Ex: Interacto with the DOM or make any ajax calls to load data

2. Updating

• static getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

1. Unmounting

• componentWillUnmount

1. Error Handling

• static getDerivedStateFromError
• componentDidCatch

Pure Component vs Regular Component

Regular Component

A regular component does not implement the shouldComponentUpdate method. It always returns true by default.

Pure Component

A pure component implements shouldComponentUpdate with a shallow props and state comparison.

Render props

The term “render prop” refers to a technique for sharing code between components using a prop whose value is a function.

Context

Context provides a way to pass data throught the component tree without having to pass props down manually at every level.