Fishing with React

On the journey to learning react, you are introduced into State. State is an object that you can store values that belong to a particular component. It’s a great efficiency as you don’t have to make calls to the backend database in order to change or update your components.

When learning about State I initially came across it in Class components, within a Class component State needs to be declared like below:

class Fish extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: "Kobudai",
      gender: "female"
    }
  }
  render() {
    return (
      <div>
        <h1>Fishes</h1>
        <p>{this.state.type}</p>
        <p>{this.state.gender}</p>
      </div>
    );
  }
}

So what’s happening here?

• We are extending our Class component with React.Component, setting up a constructor method that runs when the component is initialised. This is used to set a component’s initial state.
• super() will call the constructor of its parent class. This is required when you need to access some variables from the parent class, in this case, React.Component. Passing in props allows us to call this.props throughout the Class Component.

Doing all of the above now gives us access to this, which references the Class itself, therefore we can now set the state of the Class component. In this instance, the above Class component state contains the type of fish set as Kobudai and gender set as female.

A male Kobudai (right) and smaller female (left), Japan (Credit: Tony Wu)

What if we needed to update the state of our Class component? React provides us with a method call setState({}). This is convenient in this case as after several months the Kobudai fish displays hermaphroditism changing it’s gender to male.

class Fish extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: "Kobudai",
      gender: "female"
    }
  }
handleClick() => {
  this.setState({gender: "male"})
}
  render() {
    return (
      <div>
        <h1>Fishes</h1>
        <p>{this.state.type}</p>
        <p>{this.state.gender}</p>
        <button onClick={this.handleClick}>
        Gender Transformation
        </button>
     </div>
    );
  }
}

And there we go, updating the state of a Class component is as simple as that!

A common theme in the developer world is people often seek easier, simpler methods to achieve what they want. The developers didn’t disappoint in this instance! Enter React Hooks.

React Hooks is a way to initialise and maintain state without needing a Class component. It also provides us more efficient methods to initialize and update state. Some of the methods are useState(), useEffect(), useContext() and useRef().

Following on the example above, let’s talk through useState(). With hooks we are now able to use functional components like the one below:

const Fish = () => {
 const [type, setType] = useState("Kobudai")
 const [gender, setGender] = useState("female")
 
 const handleClick = () => {
   setGender("male")
}
return (
      <div>
        <h1>Fishes</h1>
        <p>{this.state.type}</p>
        <p>{this.state.gender}</p>
        <button onClick={handleClick}>
        Gender Transformation
        </button>
     </div>
    );
  }

The useState() hook allows us to set state as a variable, and also provides a setState variable. This means we no longer need to rely on this to call or set state. useState() takes in one argument which is the default state. In the Kobudai’s case it’s female. Now in the event handler instead of calling this.setState and having to reference the state, we can simply call setGender and pass in the updated state.

Instead of the several months it takes Kobudai to transform from female to male, React Hooks enables us to make this transformation within moments. A great addition to the React Framework.