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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
      
    function Demo()
    {
      return <h1>Welcome to GeeksforGeeks</h1>;
    }
      
    export default Demo;

    chevron_right

    
    

  • Output:

We can also use a functional component into another component.
Below program is to demonstrate the use of functional components in other components.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
      
    function Welcome() 
    {
    return (
    <h1>Welcome to GeeksforGeeks</h1>
    );
    }
      
    function functionExample()
    {
        return (
        <Welcome/>
        );
    }
      
    export default Welcome;

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { useState } from 'react'
       
    function 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;

    chevron_right

    
    

  • 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. “Effects” are the

  • Example: Program to demonstrate the use of useEffect() hook.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { useEffect } from 'react';
      
    function Example() {
      useEffect(() => {
        console.log("Mounting...");
      });
          return (
          <h1>
            Geeks....!
          </h1>
          );
    }
      
    export default Example;

    chevron_right

    
    

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { useState } from 'react'
    import props from 'prop-types';
      
    function 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 Sciecne Portal for Geeks"/>}
            </div>
            );
        }
      
    export default Example;

    chevron_right

    
    

  • Output:

react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.