A glance at Hooks in React

After the screen has been rendered, the useEffect hook will be called. If we use the useEffect Hook and provide a callback code, we can emulate the componentDidMount lifecycle function.

Whenever our component gets instantiated ( the first time the useEffect hook is called ) the code in our callback function will get executed. The useEffect hook allows us to cancel an effect if needed. This can be of great help if we have multiple effects and only one is running at a given time.

Now lets move on to the other lifecycle hooks which can be implemented using hooks as shown below −

useState(value?) : Implements the componentWillReceiveProps Hook Use when you need to update your state with new data received from an external source like a parent component. If value is not provided, then it is assumed that this hook is a pure function without any side effects, and thus no value need be supplied.

useDispose(done) : Implements the shouldComponentUpdate Hook Use when you want to cleanup or discard internal state when your component’s props or state change before rendering again. For example, if you have an expensive network call or some other resource that usually doesn’t change, and there are cases where you want to avoid re-doing it — maybe because you already calculated those values previously and don’t need to calculate them again — then this would be helpful. done should execute any cleanup operations needed for updating internal state or cleaning up resources we hold onto for future re-rendering’s, but it doesn’t have to run right away — e.g., calls that block execution.