ReactJS Functional Components

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 to 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.
Example: Program to demonstrate the creation of functional components. 

Filepath- src/index.js: Open your React project directory and edit the index.js file from src folder:

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './App';

ReactDOM.render(
  <React.StrictMode>
    <Demo />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src/App.js: Open your React project directory and edit the App.js file from src folder:

javascript

import React from 'react';
import ReactDOM from 'react-dom';

const Demo=()=>
{
  return <h1>Welcome to GeeksforGeeks</h1>;
}

export default Demo;

Output:

Different ways of calling the functional component:

We can call the functions in java script in other ways as following:

• Calling the function by using name of the function followed by the Parentheses.

Javascript

import React from 'react';
import ReactDOM from 'react-dom/client';

function Parentheses() {
  return ( <h1> As usual we can call the function using name of the function followed by
  Parentheses </h1>);
  }

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(Parentheses());

• Calling the function using the functional component

Javascript

import React from 'react';
import ReactDOM from 'react-dom/client';

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/>);

Example: We can also use a functional component into another component. The below program is to demonstrates the use of functional components in other components. 

Filepath- src index.js: Open your React project directory and edit the Index.js file from src folder

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './App';

ReactDOM.render(
  <React.StrictMode>
    <Welcome />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src App.js: Open your React project directory and edit the App.js file from src folder:

javascript

import React from 'react';

const Welcome=()=>
{
return (
    <h1>Welcome to GeeksforGeeks</h1>
    );
}

const functionExample=()=>
{
    return (
    <Welcome/>
    );
}

export default functionExample;

Output:

Functional components lack a significant amount of features as compared to class-based components. The gap is made up with the help of a special ReactJS concept called “hooks”. Hooks are special functions that allow ReactJS features to be used in functional components. 

Functional components do not have access to dedicated state variables like class-based components. The only “state” that a functional component effectively has access to are the props passed to it from its parent component. ReactJS has access to a special hook called useState() that can be used for giving the illusion of working with the state in functional components. The useState() is used to initialize only one state variable to initialize multiple state variables, multiple useState() declarations are required. 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. When the state variable needs to be updated, it can be done by calling the update function and by updating the state variable directly inside it.

Example: Program to demonstrate the use of useState() hook.

Filepath- src/index.js: Open your React project directory and edit the Index.js file from src folder:

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';

ReactDOM.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src/App.js: Open your React project directory and edit the App.js file from src folder:

javascript

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;

Output:

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. If lifecycle functions need to be used with functional components, 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: Program to demonstrate the use of useEffect() hook.

Filepath- src/index.js: Open your React project directory and edit the index.js file from src folder:

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';

ReactDOM.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src/App.js: Open your React project directory and edit the App.js file from src folder:

javascript

import React, { useEffect } from 'react';

const Example=()=> {
  useEffect(() => {
    console.log("Mounting...");
  });
      return (
      <h1>
        Geeks....!
      </h1>
      );
}

export default Example;

Output:

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. Props have more significance in functional components for the simple reason that functional components do not have access to a state, unlike class-based components.

Example: Program to demonstrate the use of props.

Filepatje- src/index.js: Open your React project directory and edit the Index.js file from src folder:

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';

ReactDOM.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>,
  document.getElementById('root')
);

Filepath- src/App.js: Open your React project directory and edit the App.js file from src folder:

javascript

import React, { useState } from 'react';
import props from 'prop-types';

const Example=()=> {
  return(
    <h1>{props.data}</h1>
    );
    }
    function propsExample()
    {
    const [change, setChange] = useState(true);
        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 Example;

Output: