DEV Community

Bryce Hao
Bryce Hao

Posted on

Use Functional Component with React Hooks to replace class component

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

  1. you have to import useState from React
  2. 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.
  3. 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.

Top comments (3)

Collapse
 
uhlanoong profile image
Uhlanoong

import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom';

class Select extends PureComponent {
state = {
options: [
{
name: 'Select…',
value: null,
},
{
name: 'A',
value: 'a',
},
{
name: 'B',
value: 'b',
},
{
name: 'C',
value: 'c',
},
],
value: '?',
};

handleChange = (event) => {
this.setState({ value: event.target.value });
};

render() {
const { options, value } = this.state;

return (


{options.map(item => (

{item.name}

))}

Favorite letter: {value}


);
}
}

ReactDOM.render(, window.document.body);

how to convert this code in functional component??

Collapse
 
tarun_geek profile image
Tarun Nagpal

How to use component lifecycle method here?

Like willmount

Collapse
 
bryce_hao profile image
Bryce Hao

in 16.8, React updated with useEffect replace life cycle. I will post how to use useEffect