State: React Hooks Or React Classes

I learned React using class components. I didn’t know much about React hooks, nor that they even existed. Of course, the talk about hooks would resound more and more as I progressed in my learning of React. Everyone would say how much better using hooks was, compared to using classes. I was advised that my learning of React hooks would be inevitable, because hooks were becoming all the buzz and are considered to be “modern React”. Furthermore, React class components were steadily being replaced by React functional components, because hooks are only to be used in functional components.

Components

Components are independent and reusable code, and they serve as a way to modularize, or create a separation of concern within our code. Components can be separated as functional, or presentational code.

Handling State

State With Class Component

React class components are regular ES6 classes that extend the component class of the React library. Before hooks, React classes were used to handle state, as well as serve as a container for handling logic. A class component “was the only option to create a dynamic and reusable component because it gave us access to lifecycle methods and all React functionalities (React Class Component vs. Functional Component: What’s the Difference — David Adeneye Abiodun)”. In order to initialize state in a class component, a constructor method is needed:

import React, { Component } from "react"
class Count extends Component {
     constructor() {
        super()
      this.state = {count: 0}
    }
}

In a React class component, the constructor method runs first; therefore, the initial state is set in the constructor. Above, in the constructor, the initial state object contains count: 0.

The setting and updating of state within a class component is done with setState() . setState() is how the change in state is tracked; furthermore, without setState() the component wouldn’t render with every change in state. This also alleviates the need to hard code state, which would prevent the component from rendering.

import React, { Component } from "react"
class Count extends Component {
     constructor() {
        super()
      this.state = {count: 0}
    }
     incrementer() {
      this.setState({count: this.state.count + 5})
     }
}

In the method incrementer , we are modifying state to increment by five. So initially the state is 0, but with this.setState({count: this.state.count + 5}) , state will be updated and the component will render the changed state.

import React, { Component } from "react"
class count extends Component {
     constructor() {
        super()
      this.state = {count: 0}
    }
    incrementer() {
      this.setState({count: this.state.count + 5})
     }
     
    render() {
       return (
        <div>
           <button onClick = {this.incrementer}>
             the state is now {this.state.count}
           </button>
        </div>
      )
    }
}

Every time the button is clicked on the webpage, the state is incremented by 5, and rendered on the webpage.

State With Hooks

I will repeat above with hooks in a functional component. A functional component is just a regular javascript function. Functional components were used as presentational components; They were stateless components used to just render data — no logic involved. Now, with the use of hooks, functional components are used to handle state.

import React, { useState } from "react"
const Count = () => {
     const [count, setCount] = useState(0)

       return (
        <div>
           <h1>{count}</h1>
           <button onClick = {() => setCount(count + 5)}>
             CLICK!
           </button>
        </div>
      )
}

In the functional component above, the state is initialized and set all at once using the useState hook. Variables count and setCount are initialized with useState(0) In the button tag, the onClick event handler is updating the state by incrementing by 5 with each click of the button.