From React Class component to Functional component with hooks

From React Class Component to Functional Component with hooks

May 16, 2023 · 4 minutes

You have just ended learning the freeCodeCamp React challenges or learnt the React Library few years ago and… you wonder which are those hooks everybody is talking about? You would like to know how to use those famous useState, useEffect, useContext, useTheme, useReducer, use Callback, useMemo, useRef and… create your own hook?

Read this series untitled “From React Class Component to  Functional Component and hooks”!

 

In this first episode, let’s review what is a React Component and  what are the differences between Class and Functional Components.

Summary

What is a React component ?

The correct question could have been “what is not component in React?” because components are the core of React. Everything in React is a component.

Before React 16.8 and the new addition of the hooks, you needed to write a class to use state and other features in React. Before learning how to use hooks in functional components, let’s review the differences of structure between a stateless functional component and a class component below.

How to create a React Component?

How to create a Stateless functional Component in React ?

A functional component is a function that return a JSX element.

There are three ways to declare a functional component:

const DemoComponent = function() {
    return (
        <div className=’customClass’ />
    );
};
const DemoComponent = () => {
    return (
        <div className=’customClass’ />
    )
}
function DemoComponent() {
    return <div className=’customClass’>Some text here…</div>
}

How to create a Class Component using the ES6 class syntax in React?

Create an ES6 class which extends the React.Component class. So this class will have access to many useful React features, such as local state and lifecycle hooks.

The class has:

  • a constructor defined within in that calls the constructor of the parent class (React.Component, there)  through super(). The constructor method is a special method used during the initialization of objects that are created with class keyword. Call a component’s constructor with super and pass props to both is best practice to make sure the component is initialize properly.
  • a render method that returns the jsx element.

There is one way to declare a class component:

class DemoComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            // jsx element here…
        )
    }
}

How to pass Props to a React Component ?

To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces

How to pass Props to a React Functional Component ?

When dealing with stateless functional components you have to consider it as an argument to a function which returns JSX. Then, the value of the argument can be accessed in the function body.

  • First, declare the component:
const ChildComponent = (props) => <h1>Hello, { props.propertyName }</h1>
  • Secondly, pass the props value inside the component:
<ParentComponent>
    <ChildComponent propertyName=”value” />
</ParentComponent>

Example:

const Welcome = (props) => <h1>Hello, { props.user }</h1>
<App>
    <Welcome user=”Mark” />
</App>

How to pass Props to a React class Component ?

The props are called by the constructor in a class component. Then, the value of the props can be accessed in the render method using this. Finally, pass the props value inside the component.

  • First, declare the component:
class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h1>{ this.props.propertyName }</h1>
            </div>
        )
    }
}
  • Secondly, pass the value:
class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <ChildComponent propertyName=”value” />
            </div>
        )
    }
}

Example:

class Welcome extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h1>Hello, { this.props.user }</h1>
            </div>
        )
    }
}
class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <ChildComponent user=”Mark” />
            </div>
        )
    }
}

Stateless or stateful component ?

What is a React stateless component ?

A stateless component can receive data and render JSX. It does not manage or track changes to that data.

A class component that extends React.Component but does not use internal state is a stateless component.

What is a React stateless functional component ?

A stateless functional component is any function which accepts props and return JSX.

What is a stateful component ?

A stateful component is a class component which maintains is own internal state. It can receive data and render it. It also manage or track changes to that data.

The local state:

  • is present inside a component and keep its value even if the app is re-rendered : the component is stateful.
  • allows users to interact with the data, enter information, modify the displayed values and keep the entered data.

Before React 16.8, create a class component was the only way to create a stateful component.

In conclusion

  • There are two different components in React : the functional and the class components.
  • The functional components are stateless whereas the class components are stateful.
  • A stateless component can render data but the user can not modify or enter any data through a stateless component.
  • A stateful component can keep and render data. Moreover, a stateful component allow user to modify or enter values.

Hooks are a new addition in React 16.8. Since then, it is possible to use state and other React features without writing a class.

In the next episode, we will:

  • discover how to create a class stateful component,
  • use the hook useState() and create a functional stateful component.
< Previous Post
Next Post >
Haut de page