Functional Components in React

Neelakshi Lahiri
Last Updated: May 13, 2022

Introduction

You probably already know what components are in React. In case you forgot, let’s have a quick recap. 

Components in React are used to divide a user interface into independent components that can be handled easily and are reusable.

Now, we know that there are two kinds of components - functional components and class components. So you may be wondering what they are. Let’s focus on just the functional components in React in this article. 

If you think functional components in React have something to do with functions, you are correct! 

Functional components in React are functions in JavaScript that may or may not have any parameters (here, props or properties) and return what is rendered. 

For example,

function Animal(props) 
{
    return <h1>Hello, I am an {props.name}</h1>;  

 

Now, functional components in React are also called stateless components, but what does that mean? Let’s learn that next.

Functional Components are Stateless Components

Before we move on to why functional components are stateless, we need to understand what a state is. 

In simple terms, a state is a JavaScript object in React used to represent information about a component’s current situation. Its scope is inside a particular component, and it is used for internal communication inside a component. 

Thus, by saying that a function is a stateless component, we mean that they do not have Objects, or here, states, but that’s not the end.

In React, functional components can have a concept similar to states by using hooks. We’ll learn more about it later.

Creating Functional Components in React

Functional components in React can be created in two ways:

  1. The method we saw before in the introduction.
function Animal(props) 
{
    return <h1>Hello, I am an {props.name}</h1>;  

 

2. Using the arrow function definition:

const Animal = (props) => 

    return <h1>Hello, I am an {props.name}</h1>
}

 

After creating a functional component, our next step will be to render it, but before rendering, we must learn about exporting and importing functional components in React.

Exporting and Importing Functional Components in React

In simple English, what do the terms export and import mean?

Export means to send something elsewhere, while import means to bring it. So, to use a functional component later, we must first export it to import it. 

Let’s see the syntax for both of them. 

Exporting a Functional Component

function Animal(props) 
{
    return <h1>Hello, I am an {props.name}</h1>;  


export default Animal;

Importing a Functional Component

import Animal from './Animal';

function App() 

    return (<div className="App"><Animal name = "Panda" /></div>);
}

 

Note: Here, we have to give the value of name = “Panda” since the functional component has a prop. In case you forgot about components with props, you may go through it again here under the Components With Props section. 

Also, we can use functional components without props, and I’m sure you can figure that out by yourself.

Rendering Functional Components

Do you remember why we were creating components?

That’s right, to use them in different sections of the user interface!

So, how do we use a functional component and what is rendering?

Rendering a component means using a component. It is similar to calling functions in any other programming language. 

So, to use a functional component, we must render it following the syntax given below:

ReactDOM.render(<Animal />, document.getElementById('root'));

 

Components in Components

Now that we know how to create a functional component in React and use it, we’ll learn an essential use of components - calling a component inside another component.

If you’ve already read the article on components in React, you probably already know how to use a component inside another component, but let’s have a recap of it here. 

function Animal(props) 
{
    return <h2>{props.name}!</h2>;
}

function FavAnimal() 
{
    return (<><h1>What in your favorite animal?</h1><Animal name="Panda" /></>);
}

ReactDOM.render(<FavAnimal />, document.getElementById('root'));

 

Output:

In the above program we used the Animal component inside the FavAnimal component.

Hooks in Functional Components

At the beginning of the article, we saw that functional components are known as stateless components, but we also mentioned that hooks could be used for states. We still don’t know what hooks are, so without further delay, let’s see. 

Previously, if we wanted to add a state to a functional component, the only way to do that was to convert it to a class component. Hooks are a recently added feature in React that allows us to use all React features without writing class components. 

Now, there are two rules to use hooks:

  1. We cannot call hooks inside loops, conditions, or nested functions.
  2. Hooks can only be called from functional components in React and not any JavaScript function. 

 

Now that we know what hooks are let us see how they are used as states. 

A basic hook useState( ) can be used to set and retrieve the state of functional components. Let’s see how it is used with the help of an example. 

import React, { useState } from 'react';  
  
function ClickCount() 
{  
    // Declare a new state variable  

     //useState( ) function is used to set the initial state to 0
    const [count, setCount] = useState(0);  
    return (<div>  
          <p>You clicked {count} times</p>  
          <button onClick={() => setCount(count + 1)}> Click me </button>  
    </div>);  
}  

export default ClickCount

 

Output:

 

With this, we come to the end of our discussion on functional components in React. Now let’s go through some frequently asked questions to recap what we learned.

Frequently Asked Questions

  1. What are functional components in React?
    Functional components in React are functions in JavaScript that may or may not have any parameters (here, props or properties) and return what is rendered.
     
  2. Which component in react is known as a stateless component?
    Functional components are known as stateless components. 
     
  3. How do we use states in functional components?
    A concept similar to states can be used in functional components with the help of hooks. 
     
  4. What are hooks?
    Hooks are a recently added feature in React that allows us to use all React features without writing class components.
     
  5. How do we use hooks as states in functional components?
    Hooks are used as states in functional components as shown below:

import React, { useState } from 'react';  
  
function ClickCount() 
{  
    // Declare a new state variable  

     //useState( ) function is used to set the initial state to 0
    const [count, setCount] = useState(0);  
    return (<div>  
          <p>You clicked {count} times</p>  
          <button onClick={() => setCount(count + 1)}> Click me </button>  
    </div>);  
}  

export default ClickCount

 

Key Takeaways

In this article, we learned about functional components in React, but didn’t we mention that there is another type of component?

Source: giphy


Another type of component is class components. We can learn all about it here

We can also find other articles on JavaScriptReact, and various topics here or practice commonly asked coding questions on CodeStudio.

Happy Learning!
 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think