Open In App

ReactJS Functional Components

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Functional Component is one way to create components in a React Application. React.js Functional Components helps to create UI components in a Functional and more concise way. In this article, we will learn about functional components in React, different ways to call the functional component, and also learn how to create the functional components. We will also demonstrate the use of hooks in functional components

Functional Components in React :

ReactJS Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component in React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree.

Ways to call the functional component:

We can call the functions in javaScript in other ways as follows:

1. Call the function by using the name of the function followed by the Parentheses.

// Example of Calling the function with function name followed by Parentheses
function Parentheses() {
return (<h1>
We can call function using name of the
function followed by Parentheses
</h1>);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(Parentheses());

2. Call the function by using the functional component method.

// Example of Calling the function using component call
function Comp() {
return (<h1> As usual we can call the function using component call</h1>);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Comp />);

Now, We will use the functional component method to create a program and see how functional components render the component in the browser.

Steps to create the React application:

Step 1: Create React Project 

npm create-react-app myreactapp

Step 2: Change your directory and enter your main folder charting as

cd myreactapp

Project Structure:

Screenshot-from-2023-10-06-09-44-29

Example 1: This example demonstrates the creation of functional components.

Javascript




// Filename - index.js
 
import React from "react";
import ReactDOM from "react-dom";
import Demo from "./App";
 
const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(
    <React.StrictMode>
        <Demo />
    </React.StrictMode>
);


Javascript




//Filename - App.js
 
import React from 'react';
import ReactDOM from 'react-dom';
 
const Demo=()=>{return <h1>Welcome to GeeksforGeeks</h1>};
export default Demo;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

ReactJS Functional Components

Problem with using functional components

Functional components lack a significant amount of features as compared to class-based components and they do not have access to dedicated state variables like class-based components.

Advantage of using hooks in functional components

The problem discussed above is solved with the help of a special ReactJS concept called “hooks”. ReactJS has access to a special hook called useState(). The useState() is used to initialize only one state variable to multiple state variables. The first value returned is the initial value of the state variable, while the second value returned is a reference to the function that updates it.

Example 2: This example demonstrates the use of useState() hook in functional component.

Javascript




// Filename - index.js
 
import React from "react";
import ReactDOM from "react-dom";
import Example from "./App";
 
const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(
    <React.StrictMode>
        <Example />
    </React.StrictMode>
);


Javascript




// Filename - App.js
 
import React, { useState } from "react";
 
const Example = () => {
    const [change, setChange] = useState(true);
    return (
        <div>
            <button onClick={() => setChange(!change)}>
                Click Here!
            </button>
            {change ? (
                <h1>Welcome to GeeksforGeeks</h1>
            ) : (
                <h1>A Computer Science Portal for Geeks</h1>
            )}
        </div>
    );
};
export default Example;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

ReactJS Functional Components

Functional components do not have access to lifecycle functions like class-based components do since lifecycle functions need to be defined within the boundaries of a class. A special React hook called useEffect() needs to be used. It is worth noting that useEffect() isn’t an exact duplicate of the lifecycle functions – it works and behaves in a slightly different manner.

Example 3: This example demonstrates the use of useEffect() hook.

Javascript




// Filename - index.js
 
import React from "react";
import ReactDOM from "react-dom";
import Example from "./App";
 
const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(
    <React.StrictMode>
        <Example />
    </React.StrictMode>
);


Javascript




// Filename - App.js
 
import React, { useEffect } from "react";
 
const Example = () => {
    useEffect(() => {
        console.log("Mounting...");
    });
    return <h1>Geeks....!</h1>;
};
export default Example;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

ReactJS Functional Components

Data is passed from the parent component to the child components in the form of props. ReactJS does not allow a component to modify its own props as a rule. The only way to modify the props is to change the props being passed to the child component. This is generally done by passing a reference of a function in the parent component to the child component.

Example 4: This example demonstrates the use of props.

Javascript




// Filename - index.js
 
import React from "react";
import ReactDOM from "react-dom";
import PropsExample from "./App";
 
const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(
    <React.StrictMode>
        <PropsExample />
    </React.StrictMode>
);


Javascript




// Filename - App.js
 
import React, { useState } from "react";
 
const Example = (props) => {
    return <h1>{props.data}</h1>;
};
const PropsExample = () => {
    // const [change, setChange] = useState(true);
    const [change, setChange] = useState(false);
    return (
        <div>
            <button onClick={() => setChange(!change)}>
                Click Here!
            </button>
            {change ? (
                <Example data="Welcome to GeeksforGeeks" />
            ) : (
                <Example data="A Computer Science Portal for Geeks" />
            )}
        </div>
    );
};
export default PropsExample;


Step to run the application: Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

ReactJS Functional Components



Last Updated : 21 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads