DEV Community

Danielle Ye
Danielle Ye

Posted on • Updated on

React: Class Component VS Function Component with Hooks

Class Component

Before React Hooks, when we want to create a dynamic component, we have to create a class component and use lifecycle methods to change states to make it reusable and encapsulate.

By creating an ES6 class, the class needs to extend React.Component with a render method in it, which will return the JSX markups. Also, we need to assign the initial state in the constructor with this.state. As an example, here we create a simple clock component with class. To make the clock working, we have to add Lifecycle Methods to our Class. We put elements into the DOM, it is called mounting in React. Same, We remove elements from the DOM, it is called unmounting. In React, mounting a component will invoke the following four build-in methods:

  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount()

More information please read from React Doc: Commonly used lifecycle methods

In our example, we set the initial state in the constructor and defined componentDidMount() to set the time every second. So the clock will update the state every second with the current time.

class ClockUsingClass extends React.Component {
    constructor(props) {
        super(props)
        this.state = { date: new Date() }
    }

    componentDidMount() {
        this.time = setInterval(() => {
            this.changeTime()
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.time)
    }

    changeTime() {
        this.setState({ date: new Date() })
    }

    render() {
        return (
            <div className="clock">
                <h1>Hello! This is a class component clock.</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        )
    }
}

Obviously we can see, for a class-based component, we need several steps to make it work with state-changing:

  1. Create a class with constructor(props) and render() methods.
  2. Set initial state with this.state statement in the constructor.
  3. Use this.setState() to update states.
  4. Use lifecycle methods like componentDidMount(), componentWillUnmount(), componentDidUpdate() etc. to change states

Function Component with hooks

Hooks are a new addition in React 16.8. The most useful feature of Hooks is that it allows using state without using class.

There are two most commonly used hooks: the state hook -- useState and the effect hook -- useEffect.

State hook allows you to add states in the function component. Instead of setting an initial state with this.state statement in the constructor, we can import { useState } from react, which will allow you to set the initial state as an argument. State hook will return a pair of values: the current state and a function that updates it. Usually, we will use useState like this:

    const [time, setTime] = useState(new Date())

Effect hook will get invoked with the first DOM updating. We can pass in a function in useEffect, and every time the DOM gets updated, the function in useEffect will get invoked too. Also, the effect hook allows you to pass in an array as the second argument, which contains all the dependencies that will trigger the effect hook. if any of the dependencies changed, the effect hook will run again. This feature provides us a more efficient way to make an Ajax request. Instead of making the request every time with DOM updates, you can pass in dependencies that only make the request while these values change.
useEffect can be used like:

    useEffect(() => {
        setInterval(() => {
            changeTime()
        }, 1000)
    })

So, here we re-write the clock we created above with hooks

const ClockUsingHooks = props => {
    const [time, setTime] = useState(new Date())

    const changeTime = () => {
        setTime(new Date())
    }

    useEffect(() => {
        const tick = setInterval(() => {
            changeTime()
        }, 1000)
        return () => clearInterval(tick)
    })
    return (
        <div className="clock">
            <h1>Hello! This is a function component clock.</h1>
            <h2>It is {time.toLocaleTimeString()}.</h2>
        </div>
    )
}

Summary

Comparing with these two ways to create a component, we can clearly see that hooks need less code and it is more clear to read and understand. Hooks give us a more efficient way to replace lifecycle methods.

Check out the repo to make a simple clock here

Top comments (19)

Collapse
 
exinferis profile image
Exinferis

Function based components are harder to read in my opinion and large codebases tend to look like spaghetti when using function components. For less complex stuff, they seem to be a good way to go, for more complex things or larger codebases I rather stick to well structured class based components.

Collapse
 
amitvrm036 profile image
Amit Kumar Verma

I was also thinking that but then I read this overreacted.io/how-are-function-co... and it changed my view about functional components , they seems more reliable than class components.

Collapse
 
zhengmao profile image
mao.zheng

agreed

Collapse
 
joranbeasley profile image
joranbeasley

I think you left out the listener filter (empty for setup and tear down ... otherwise this gets called on every update to any state.

useEffect(() => { // setup (componentDidMount)
        const tick = setInterval(() => {
            changeTime()
        }, 1000)
        return () => { // teardown (componentWillUnmount)
              clearInterval(tick)
        }
    },[/* empty filter for setup/teardown */])
Enter fullscreen mode Exit fullscreen mode
Collapse
 
curlywurlycraig profile image
Craig Wilkinson • Edited

The useEffect call in your example is missing an empty dependency list. This probably isn't quite doing what you think: it's setting up a new timeout every time the component re-renders.

Ironically, a class component almost certainly wouldn't have such a problem because of the clearly named componentWillMount method.

That said, helpful article and I am generally a fan of function components.

Collapse
 
adjsays profile image
Andrew Johns

New to React (I've only read about it) so I may be wrong (and if I am, I'd like to know why) but I don't think you need the changeTime function in your hooks example, you can call setTime directly which would reduce it even further. Is it just a question of code style?

useEffect(() => {
const tick = setInterval(() => {
setTime(new Date())
}, 1000)
return () => clearInterval(tick)
})

Collapse
 
brunofunnie profile image
Bruno de Oliveira

It's good practice to decouple your code

Collapse
 
devesh198 profile image
Devesh Gupta

If setTime() is added to useEffect() then it'll have to be added as a dependence also. This could trigger useEffect many times if setTime() is used else where and create an endless loop.

Collapse
 
simonrobertson profile image
Simon Robertson

I prefer to use class components, but it's personal preference more than anything. Class components and function components (with hooks) both have pros and cons.

One of the problems with class components is dealing with callback scope, i.e. what "this" references, but that can be handled easily these days by attaching a simple decorator to the callback methods. This isn't an issue for function components.

One of the problems with function components (with hooks) is every time the component is rendered, nearly every function in the component (either top-level or passed into a hook) has to be recreated, and that will cascade down through the hooks you use. That can end up being quite painful for performance and/or the garbage collector. This isn't an issue for class components.

You can do almost everything with class components as you can with function components, and vise-versa, so which one people decide to use is personal preference and/or an architectural design decision. I don't believe one is significantly worse than the other.

Collapse
 
tian3401 profile image
tian3401

Hey Danielle! Had a quick question for you. Now that hooks have brought state to functional components, beside concision why would someone use a class component over a functional component?

Collapse
 
danielleye profile image
Danielle Ye

Hi Tian,
In my understanding, class components can be replaced by functional components with hooks. But for some old projects, they are still using class instead of rewriting the whole project.
Also as react team said, they won't stop supporting for class but they suggest trying hooks on new projects. Check this on react docs 👉🏻: reactjs.org/docs/hooks-intro.html#...

Collapse
 
smrutikant profile image
smrutikant

How can we pass state properties between two functional components?

Collapse
 
scsskid profile image
scsskid

Im also new to react, so take it with a grain of salt:

You create a custom Hook in a separate file, which you can import then, this is your childComponent, as long as you follow the naming Schema (use*), state props should propagate automatically

Collapse
 
mnas profile image
mnas

Why does the useEfrect return the clear interval function? How does it work??

Collapse
 
danbmky profile image
Dan Bamikiya

Danielle this is an awesome post. Keep it up!

Collapse
 
rodmartinezmedina profile image
Rodrigo Martinez Medina

Nice and clear article.Thanks a lot for sharing :)