Before React 16.8, React class components were the only way to track component state and lifecycle; functional components were considered stateless. Class components are JavaScript object-oriented classes and are more complex to build than functional components. When React components needed to maintain their state, class components were used. Whereas functional components were mainly responsible for rendering UI by simply accepting data and displaying them in some form.
With the introduction of Hooks, functional components got capabilities nearly identical to class components.
This lesson discusses how we can implement the class components in React.
To implement a class component, we need to define a JavaScript class that inherits the Component class imported from React.
Inside the class component, we need to include a render() function where we specify the functionality of our component. The render function returns a JSX, which gets rendered every time we call that class component.
State in Class Components
We initialize the state with the help of constructors. Constructors are special methods that initialize objects or variables whenever a class component is called. Within the constructor, the state is declared using the this.state property, which is assigned an object containing the initial values of the state variables. To access the state values, we need to use this.state.value. Additionally, it's essential to invoke super() within the constructor to call the constructor function of the parent class i.e. React.component. This allows us to access properties or variables inherited from the parent class.
To update the state, we need to use the this.setState() method. To the above example, we will implement a new function called handleUpdate, which is responsible for updating the state when called and a button to trigger the event.
Props in class components
The parent component can pass any data as props to its children similar to what we we have done in functional components. In the child component, we can access the passed props using this.props.
Commonly used lifecycle methods
We have already discussed React's lifecycle phases in the component lifecycle lesson. We have also seen how the useEffect hook aids in performing various actions during the different phases of a component's lifecycle. Lifecycle methods in class components serve functions similar to useEffect. componentDidMount, componentDidUpdate, and componentWillUnmount are commonly used lifecycle methods. Let's look into each of them in detail.
componentDidMount()
This method is called once the component has been mounted into the DOM. Its functionality is similar to that of useEffect with an empty dependency array.
When the component has been mounted, componentDidMount is called which triggers the setTimeout method.
componentDidUpdate()
Its functionality is similar to useEffect with a non-empty dependency array, except this method is not called for the initial render.
Whenever the handleUpdate method is called, the count state is incremented, triggering a re-render of the component. After the re-render, componentDidUpdate is called, and it logs the updated count value to the console.
componentWillUnmount()
This method is called just before the component is removed from the DOM. It allows you to perform any necessary cleanup such as invalidating timers, canceling network requests, etc. You should not call setState in componentWillUnmount because the component will never be re-rendered.
When the user clicks the Delete Child button, the handleDelete function will be called which will update the showChild state to false. This causes the Child component to unmount and trigger the componentWillUnmount method, here we are displaying an alert to illustrate the cleanup process.