Use Functional Component with React Hooks to replace class component

Bryce Hao — Sun, 06 Oct 2019 20:57:16 +0000

Compare React Hooks(useState) with React Class component

React hooks changing the way how we are render our component with React,
As we all know React have two ways to render a component.
Functional Component and class Component

But if you would like to use state and react life cycle in your component, you have to use Class Component. which is heavy and hard to rebuild your component and hard to run Unit test.
Here is a sample how to handle state in class component,

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { times: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ times: this.state.times + 1 });
  }
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.handleClick}>
          you click {this.state.times} times{" "}
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

As you find out, from above you have to add state with constructor and define your function to update state, even with one state.

Now, React hooks can make it much more simple with functional component
You can use a functional component, with useState.
Here will be 3 steps to use state hooks in React 16.8

you have to import useState from React
Define your useState at beginning, (if you would like to use two states, you just define two useState) You can assume the parameter of useState is the init value of the this state, in my sample, count init value is 0.
call setCount with new value when needed.

const [count, setCount] = useState(0)

setCount is a function use to update state.
You can assume as same as this.setState in class component.

import React, {useState} from "react";
import ReactDOM from "react-dom";

import "./styles.css";
function App () {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => setCount(count + 1)}>
        you click {count} times
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/embed/happy-leavitt-73btl

Functional component doesn't have react life cycle, the code is light and easy for you start learning React and reading other people's code.
The most reason to use a class component is state, now game has been changed.

Forem: Bryce Hao

Use Functional Component with React Hooks to replace class component

Compare React Hooks(useState) with React Class component