ReactJS Functional Components

In ReactJS, functional components are a core part of building user interfaces. They are simple, lightweight, and powerful tools for rendering UI and handling logic. Functional components can accept props as input and return JSX that describes what the component should render.

Example:

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState("Hello World!");

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>{message}</h1>
      <button onClick={() => setMessage("Welcome to React!")}>
        Click Me!
      </button>
    </div>
  );
}

export default App;

Output:

When a functional component receives input and is rendered, React uses props and updates the virtual DOM to ensure the UI reflects the current state.

• Props: Functional components receive input data through props, which are objects containing key-value pairs.
• Processing Props: After receiving props, the component processes them and returns a JSX element that defines the component's structure and content.
• Virtual DOM: When the component is rendered, React creates a virtual DOM tree that represents the current state of the application.
• Re-rendering: If the component's props or state change, React updates the virtual DOM tree accordingly and triggers the component to re-render.

Functional Component with Props

In React, a functional component with props is a JavaScript function that receives an object called props as its argument. Props (short for “properties”) are used to pass data from a parent component to a child component.

This allows components to be dynamic and reusable, as the data displayed can change based on what is passed in.

Example:

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

// Functional component with props
function Greet(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// Rendering the component and passing a prop
ReactDOM.render(
  <Greet name="Alice" />,
  document.getElementById('root')
);

Output:

Hello, Alice!

When to Use ReactJS Functional Components

Functional components should be used whenever possible because they are simpler, easier to test, and more performant than class components. However, there are a few cases where functional components may not be suitable:

• Stateful components: Functional components cannot hold state on their own. Therefore, if you need to maintain state within your component, you may need to use a class component.
• Lifecycle methods: If you need to use lifecycle methods such as componentDidMount, componentDidUpdate, or componentWillUnmount, you will need to use a class component.

How to Pass Props to a ReactJS Functional Component

Props are used to pass data from a parent component to a child component. Props are read-only and allow you to make a component dynamic by passing different values into it.

1. Passing a Single Prop to a React Functional Component:

import React from 'react';
import Greeting from './components/Greeting';  

function App() {
  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <Greeting message="Hello, World!" />  {/* Passing 'message' prop */}
    </div>
  );
}

export default App;

import React from 'react';

const Greeting = (props) => {
  return <h1>{props.message}</h1>;  

export default Greeting;

Output

Hello World!

In this code

• In the App.js component, we are passing a name prop to the Greeting component.
• In Greeting.js, the name prop is accessed using props.name, and it is used to dynamically display the greeting message.
• When you render <Greeting name="John" />.

2. Destructuring Props

Instead of using props.name, you can destructure the props object directly in the function’s argument to make the code cleaner.

import React from 'react';

// Functional Component with destructuring
const Welcome = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// Parent Component
const App = () => {
  return <Welcome name="Jiya" />;
};

export default App;

In this example

• The Welcome component receives the name prop using destructuring in the function argument, making it easier to access the name value.
• Instead of writing props.name, we now directly use { name } within the component.

React Functional Components Vs. Class Components