Forem

Eelco Verbrugge
Eelco Verbrugge

Posted on • Edited on

React class to functional: states

In 2018 React introduced Hooks. "They let you use state and other React features without writing a class." Hooks can be used in functional components but a lot of projects are still written in class components.

In this serie I'll explain how easy it is to convert/refactor your class component to a functional component so you can use Hooks.

States

class component

import React from 'react';
import {Button} from "react-bootstrap";

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
        this.handleShow = this.handleShow.bind(this);
    }

    handleShow() {
        this.setState({show: true});
    }

    render() {
        const {show} = this.state;

        return (
            <>
                <Button onClick={this.handleShow}>Show</Button>
                {show && <h1>Awesome</h1>}
            </>
        )
    }
}

export default Example;
Enter fullscreen mode Exit fullscreen mode

functional component

const Example = () => {
  const [show, setShow] = useState(false);

  const handleShow = () => {
    setShow(true);
  }

  return (
    <>
      <Button onClick={handleShow}>Show</Button>
      {show && <h1>Awesome<h1>}
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

1. Extends
Functional components no longer need to extends from React.Component

2. Constructor
Where as a constructor is needed in a class component to set states, a functional component can use the "useState" hook. Just import this hook to use it import React, {useState} from 'react';

3. Passing Functions to Components
In class components it is necessary to pass functions to components in the constructor by .bind(this) in order to work. Not needed in a functional component anymore.

4. Function
Functions are written a little different. The good old myFunction() { ... } has been replaced by myFunction = () => { ... }

5. Variables
Not needed anymore to point out to this.state.myState, but just use myState

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay