In React version 16.8, the new addition of Hooks allow you to use state and other React features without writing a class. They do not completely replace classes or change any pre-existing React concepts. Instead, they provide a more direct API to props, state, context, refs, and lifecycle. It allows a developer to plan what to do and how to do it at the birth, growth or death of User interfaces(user interacting with application by clicking, hovering, pressing a key or performing many other events on UI components)
Hooks are are various methods which are invoked at different phases of the lifecycle of a component.
Stages of a React Component with Hooks
The four stages of a React component are: Initialization, Mounting, Update, and Unmounting.
Initialization
In this phase, the React Component is setting up the initial states and default props. [This example is from the first linked source at the end].
Here, the defaultProps property defines all of the define value of props.
Mounting
Now our React component is ready to be mounted to the DOM. This stage does the process of converting the virtual components into actual DOM elements that are placed in the DOM by React. A React hook available for this phase is componentWillMount. The hook is executed just before the React Component is about to mount on the DOM. It handles preparing our component for a change. So, after this, the component will mount to the DOM. This method is executed just before a component’s first render. The render method mounts the component onto the browser. Finally, the hook componentDidMount is executed after the component did mount on the DOM. This is where you load data. The starting AJAX loads data into component.
In this example, a bricks.js library called from the initizalizeGrid method is used to creat and arrange a grid. This.interval adds more blocks every 2 seconds.
Update
This phase consists of the React component growing by receiving new updates (sending new props or updating the state). The main difference between the two are is that when new props are sent, the hook method componentWillReceiveProps will be executed. This hook asks the component to reload it’s data. This is how the state can be kept synced with the new props.
When the current state is updated by calling setState, shouldComponentUpdate is executed in which the hook asks React when the component receives new props or state is being updated, should React re-render or it can skip rendering? By default, it returns true.
Then, componentWillMount, render, and componentDidMount are executed. The hooks behave in the same way as stated earlier, regardless of state.
Unmounting
Finally, in this phase, the component will get unmounted from the DOM. Now you can cancel any outgoing network requests, or remove all event listeners associated with the component. componentWillUnmount is the last hook of the life cycle. This hook is mostly used to clear out data. For example, on logout, the user details and all the auth tokens can be cleared before unmounting the main component. It is really just cleaning up any leftovers from your component.
Why Are React Hooks Important?
They make managing state and running side effects easy, organized and new-developer friendly. It is “ pairing reusable function-based components with others [that] fundamentally transforms the way that one can build a React app by allowing them to begin to think of functional components as a tool for building and providing individual abilities to other more central components.”