React Functional Components: Prop, JSX, Examples in 2024

A React Functional Component is a JavaScript function that returns JSX, which defines what the UI should look like. Unlike class components, which are based on ES6 classes and have lifecycle methods and internal state management, functional components are simpler and focus solely on rendering. They receive props as arguments and use these to display data. Initially, functional components were stateless and did not support lifecycle methods, but this changed with the introduction of React Hooks in version 16.8. 

‍

Hooks allow functional components to use state (state), handle side effects (useEffect), and access context (useContext), bringing them on par with class components in terms of functionality. This makes functional components more versatile and easier to work with, as they offer a cleaner and more concise syntax. They are preferred for their simplicity and improved performance in many cases. 

‍

For example, a basic functional component might simply display a greeting message based on props. In contrast, a component using Hooks can manage local state and perform side effects, such as updating the document title, all within a single function. This modern approach aligns with the trend towards functional programming in JavaScript.

‍

What is React Functional Component

A React Functional Component is a type of component in React, a popular JavaScript library for building user interfaces.

‍

Key Characteristics:

• Function-Based: Unlike class components, which are based on ES6 classes, functional components are simply JavaScript functions.

• Simpler Syntax: They are generally simpler and more concise. They don’t have to manage their own state or lifecycle methods in their traditional form.

• Props: Functional components receive props as their argument, which they can use to render UI elements.

• Hooks: Since the introduction of React Hooks in React 16.8, functional components can now use state and other React features (such as useState, useEffect, and useContext) without needing to be class-based.

‍

Basic Example

import React from 'react';

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

export default MyComponent;

‍

Example with Hooks

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

‍

In this example:

• useState is a Hook that lets you add state to a functional component.

• useEffect is a Hook that lets you perform side effects in your component, like updating the document title.

‍

Functional components are often preferred for their simplicity and performance benefits, especially with the power of Hooks to manage state and side effects.

‍

React Function Component Example

Here's a practical example of a React Functional Component, including one that uses React Hooks for state management and side effects.

‍

Basic Functional Component

This example demonstrates a simple, functional component that takes props and displays a greeting:

import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

‍

Functional Component with Hooks

In this example, the functional component uses the useState and useEffect hooks. It manages a counter state and updates the document title based on the counter value:

import React, { estate, useEffect } from 'react';

function Counter() {
  // Declare a state variable named 'count' and a function to update it
  const [count, setCount] = useState(0);

  // useEffect hook to update the document title whenever 'count' changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Dependency array: effect runs when 'count' changes

  // Return JSX to render the component
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

‍

React Function Component: Props

In React, props (short for properties) are used to pass data from a parent component to a child component. A functional component receives props as an argument, which it can use to render dynamic content based on the values provided. Here’s how you can use props in a React functional component:

‍

Basic Example

Here's a simple, functional component that uses props to display a greeting message:

import React from 'react';

// Functional component that accepts props
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

‍

In this example, Greeting is a functional component that takes props as its parameter. It accesses props. name to display a personalized greeting message.

‍

Example with Destructuring

For cleaner code, you can use destructuring to directly extract the properties you need:

import React from 'react';

// Functional component with destructured props
function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

export default Greeting;

‍

Here, { name, age } is used to extract name and age directly from props. This makes the code more readable and concise.

‍

Using the Component

To use the Greeting component and pass props to it, you would do something like this:

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting'; // Assuming Greeting is in the same directory

function App() {
  return (
    <div>
      <Greeting name="Alice" age={30} />
      <Greeting name="Bob" age={25} />
    </div>
  );
}

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

‍

In the App component, Greeting is used twice with different name and age props, demonstrating how data can be passed and used in functional components.

‍

React Arrow Function Component

In React, an arrow function component is a shorthand syntax for creating functional components using ES6 arrow functions. Arrow functions provide a concise way to write components and are often preferred for their brevity and clarity.

‍

Basic Example

Here’s a basic example of a React arrow function component:

import React from 'react';

// Arrow function component
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

‍

In this example:

• Greeting is defined as an arrow function that takes props (destructured to { name }) and returns JSX to render a greeting message.

‍

Example with Hooks

Arrow function components can also use React Hooks for state and side effects:

import React, { useState, useEffect } from 'react';

// Arrow function component with Hooks
const Counter = () => {
  // Declare a state variable named 'count' and a function to update it
  const [count, setCount] = useState(0);

  // useEffect hook to perform side effects
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Dependency array: effect runs when 'count' changes

  // Return JSX to render the component
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

‍

React Stateless Function Component

A React Stateless Function Component, also known simply as a "functional component," is a type of component that does not manage its own state or handle lifecycle methods. It is designed primarily for presenting UI based on the data it receives via props. Stateless components are simpler and more efficient than class components for rendering UI.

‍

Characteristics:

• No Internal State: Stateless components do not have their internal state. They rely entirely on props passed from their parent components.

• No Lifecycle Methods: They do not use lifecycle methods like componentDidMount or componentDidUpdate. If side effects or state management are needed, Hooks (e.g., useState or useEffect) are used in modern React functional components.

• Pure Functions: Stateless components are often pure functions, meaning they produce the same output for the same input and do not cause side effects.

‍

Basic Example:

Here’s an example of a stateless function component:

import React from 'react';

// Stateless function component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

‍

In this example:

• Greeting is a stateless functional component that takes props as an argument.

• It returns JSX that renders a greeting message using the name prop.

‍

Example with Destructuring:

Using destructuring can make the code cleaner:

import React from 'react';

// Stateless function component with destructuring
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

‍

Usage in a Parent Component:

Here’s how you might use the Greeting component within a parent component:

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting'; // Assuming Greeting is in the same directory

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

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

‍

In this example:

• The App component renders two Greeting components, each with a different name prop.

‍

Stateless function components are ideal for rendering UI that is purely based on the props received, making them simpler and easier to understand. They are a foundational concept in React and are often used in combination with other features like Hooks to build more complex functionality.

‍

React Function Component: State

In React, functional components can manage state using Hooks, a feature introduced in React 16.8. The most commonly used Hook for state management is useState. This allows functional components to have a local state, similar to class components but with a simpler syntax.

‍

Using useState

The useState Hook provides a way to add state to functional components. It returns a state variable and a function to update that state.

‍

Basic Example

Here’s a basic example of a functional component with a state:

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable named 'count' and a function to update it
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

‍

Explanation:

1. Importing useState: You need to import useState from React to use it in your component.

‍

2. Declaring State: const [count, setCount] = useState(0);

• count is the current state value.

• setCount is the function used to update the state.

• 0 is the initial state value.

‍

3. Using State:

• The current state value (count) is displayed in the <p> tag.

• The state is updated when the button is clicked, by calling setCount(count + 1).

‍

Example with Multiple State Variables

You can also manage multiple pieces of state within a single functional component:

‍

import React, { useState } from 'react';

function Form() {
  // Declare multiple state variables
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  return (
    <div>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <br />
      <label>
        Age:
        <input
          type="number"
          value={age}
          onChange={(e) => setAge(e.target.value)}
        />
      </label>
      <br />
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

export default Form;

‍

Explanation:

Multiple State Variables:

• name and age are two separate state variables managed by useState.

• setName and setAge are their respective update functions.

‍

Updating State:

• The input fields update their respective state variables via the onChange event handlers.

‍

Functional components with state are powerful and flexible, allowing you to build interactive UIs without needing class components. The useState Hook simplifies state management and keeps the component code clean and concise.

‍

React Function Component: Event Handler

In React, event handlers are used to respond to user interactions, such as clicks, form submissions, or keystrokes. When using functional components, event handlers are defined as functions within the component and are passed to JSX elements as props.

‍

Basic Example

Here’s a simple example of a React functional component with an event handler:

import React, { useState } from 'react';

function ClickCounter() {
  // Declare a state variable named 'count' and a function to update it
  const [count, setCount] = useState(0);

  // Event handler function
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

export default ClickCounter;

‍

Explanation:

1. State Declaration:

• Const [count, setCount] = useState(0); initialises a state variable count with an initial value of 0.

‍

2. Event Handler Function:

• Const handleClick = () => { setCount(count + 1); }; defines an arrow function that increments the count state by 1 each time it is called.

‍

3. Event Handling in JSX:

• <button onClick={handleClick}>Click me</button> attaches the handleClick function to the button's onClick event. When the button is clicked, handleClick is executed, updating the state.

‍

Handling Event Objects

Event handler functions often receive an event object, which provides information about the event. For example, handling form submissions:

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');

  // Event handler function for form submission
  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent the default form submission behavior
    alert(`A name was submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

‍

Explanation:

1. Form Submission:

• const handleSubmit = (event) => { event.preventDefault(); alert(A name was submitted: ${name}); }; prevents the default form submission behavior (which typically reloads the page) and shows an alert with the entered name.

‍

2. Form Element:

• <form onSubmit={handleSubmit}> attaches the handleSubmit function to the form’s onSubmit event.

‍

3. Input Handling:

• The onChange event handler updates the name state as the user types.

‍

Inline Event Handlers

You can also define event handlers inline in JSX:

import React, { useState } from 'react';

function Button() {
  const [message, setMessage] = useState('Hello!');

  return (
    <button onClick={() => setMessage('Button Clicked!')}>
      {message}
    </button>
  );
}

export default Button;

‍

In this example, the event handler is defined directly within the onClick prop as an arrow function.

Event handlers in functional components provide a way to manage user interactions and respond to events, making them a key part of building interactive UIs in React.

‍

React Function Component: Callback Function

In React, a callback function is a function passed as a prop from a parent component to a child component. It allows the child component to communicate with the parent component or handle events and actions that occur within the child. Callback functions are essential for managing state changes, handling user interactions, and coordinating between components.

‍

Basic Example

Here's a simple example demonstrating a callback function in a React functional component:

‍

Parent Component

import React, { useState } from 'react';
import Child from './Child'; // Assuming Child is in the same directory

function Parent() {
  const [message, setMessage] = useState('');

  // Callback function to update the message
  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <h1>Message from Child: {message}</h1>
      <Child onMessageChange={handleMessageChange} />
    </div>
  );
}

export default Parent;

‍

Child Component

import React from 'react';

function Child({ onMessageChange }) {
  // Handler function to call the callback with a new message
  const sendMessage = () => {
    onMessageChange('Hello from the Child component!');
  };

  return (
    <button onClick={sendMessage}>
      Send Message to Parent
    </button>
  );
}

export default Child;

Explanation:

Parent Component:

• State Management: const [message, setMessage] = useState(''); initializes state to store the message received from the child component.

• Callback Function: const handleMessageChange = (newMessage) => { setMessage(newMessage); }; defines a callback function that updates the parent’s state.

• Passing Callback: <Child onMessageChange={handleMessageChange} /> passes the handleMessageChange function as a prop to the Child component.

‍

Child Component:

• Callback Prop: function Child({ onMessageChange }) receives the onMessageChange function via props.

• Invoke Callback: const sendMessage = () => { onMessageChange('Hello from the Child component!'); }; calls the onMessageChange function when the button is clicked, sending a message to the parent component.

‍

Example with Parameters

Callback functions can also be used to pass parameters. For example, if you want to send more complex data:

‍

Parent Component

import React, { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState({ name: '', age: 0 });

  const handleDataChange = (name, age) => {
    setData({ name, age });
  };

  return (
    <div>
      <h1>Name: {data.name}, Age: {data.age}</h1>
      <Child onDataChange={handleDataChange} />
    </div>
  );
}

export default Parent;

‍

Child Component

import React from 'react';

function Child({ onDataChange }) {
  const updateData = () => {
    onDataChange('Alice', 30);
  };

  return (
    <button onClick={updateData}>
      Update Parent Data
    </button>
  );
}

export default Child;

‍

Explanation:

Parent Component:

• State Management: The data state object holds name and age.

• Callback Function: handleDataChange updates name and age.

• Passing Callback: onDataChange prop is passed to the Child component.

‍

Child Component:

• Callback Invocation: updateData sends both name and age to the parent using the callback.

‍

Callback functions facilitate communication between parent and child components in React, making them essential for managing data flow and interactions within your application.

‍

React Function Component: Lifecycle

In React, lifecycle methods are traditionally associated with class components, allowing you to perform actions at specific points in a component's lifecycle (e.g., mounting, updating, unmounting). However, with functional components, lifecycle management is achieved using React Hooks, which provide similar capabilities more functionally and concisely.

‍

Using useEffect for Lifecycle Management

The useEffect Hook is the primary tool for managing side effects and mimicking lifecycle behavior in functional components. It allows you to run code after the component renders and handle various lifecycle phases such as mounting, updating, and unmounting.

‍

Basic Usage of useEffect

Here’s a simple example of using useEffect in a functional component:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // useEffect to run code after every render
  useEffect(() => {
    console.log('Component rendered or updated');
    
    // Cleanup function (optional)
    return () => {
      console.log('Cleanup before next effect or unmount');
    };
  }, [count]); // Dependency array: effect runs when `count` changes

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example;

‍

Explanation:

Running Effect:

• useEffect(() => { ... }, [count]); runs the effect after every render where the count has changed. It logs a message indicating that the component rendered or updated.

‍

Cleanup Function:

• return () => { ... }; provides a cleanup function that runs before the component unmounts or before the effect runs again. This is useful for cleaning up resources like timers or subscriptions.

‍

Lifecycle Phases with useEffect

Mounting: To run code once after the component mounts, pass an empty dependency array:

useEffect(() => {
  console.log('Component mounted');
}, []); // Empty array: effect runs only once after mounting

‍

Updating: To run code whenever specific dependencies change, include them in the dependency array:

useEffect(() => {
  console.log('Count changed:', count);
}, [count]); // Effect runs whenever `count` changes

‍

Unmounting: The cleanup function inside useEffect is called when the component unmounts:

useEffect(() => {
  return () => {
    console.log('Component unmounted');
  };
}, []); // Cleanup runs when the component unmounts

‍

Example with Multiple Effects

You can use multiple useEffect calls to handle different aspects of lifecycle management:

import React, { useState, useEffect } from 'react';

function MultiEffectComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  useEffect(() => {
    console.log('Component mounted or name changed');
  }, [name]); // Runs when `name` changes

  useEffect(() => {
    console.log('Component mounted or count changed');
  }, [count]); // Runs when `count` changes

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MultiEffectComponent;

‍

Explanation:

• Multiple Effects: Each useEffect is responsible for different side effects based on its dependencies. This modular approach helps keep code organised.

‍

By using useEffect, functional components in React can manage lifecycle events and side effects effectively, offering a clean and intuitive way to handle component behavior across its lifecycle.

‍

Pure React Function Component

A "pure" React function component is a functional component that renders the same output given the same input (props). It is a concept borrowed from functional programming, emphasizing predictability and immutability. Pure components do not have side effects and do not rely on internal state or lifecycle methods to affect their rendering.

‍

Characteristics of a Pure Function Component:

1. Deterministic Output: Given the same props, a pure component will always render the same output. This makes the component predictable and easier to test.

2. No Side Effects: Pure components do not perform actions that affect other parts of the application or interact with external systems (like making HTTP requests or manipulating the DOM directly).

3. Simple and Stateless: Pure function components are often stateless, focusing solely on rendering based on props. They can be either function declarations or arrow functions.

‍

Example of a Pure Function Component

Here’s a simple example of a pure function component:

import React from 'react';

// Pure function component
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

‍

In this example:

• The Greeting component is pure because it only renders the UI based on the name prop.

• It does not use any internal state or side effects, and the output is solely determined by the props it receives.

‍

Example with Props Destructuring

Using destructuring in the function parameter can make the code more concise:

import React from 'react';

// Pure function component with destructuring
const Greeting = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

export default Greeting;

‍

Pure Function Components with Memoization

In scenarios where performance is critical, you can use React.memo to optimize functional components that accept props and might otherwise cause unnecessary re-renders:

import React from 'react';

// Pure function component wrapped with React.memo for optimization
const Greeting = React.memo(({ name }) => {
  console.log('Rendering Greeting component');
  return <h1>Hello, {name}!</h1>;
});

export default Greeting;

‍

Explanation:

• React.memo: This higher-order component (HOC) optimizes functional components by memoizing their output. It ensures that the component only re-renders when its props change. This can improve performance by avoiding unnecessary re-renders.

‍

React Function Component: Export and Import

In React, exporting and importing components is essential for organizing and reusing code across different parts of an application. Components can be exported and imported in various ways, depending on whether you want to use named exports or default exports.

‍

Default Export

A default export allows you to export a single value or component from a module. This is the most common way to export React components when you only have one component per file.

‍

Example of Default Export

Greeting.js

import React from 'react';

// Default export of the Greeting component
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

‍

App.js

import React from 'react';
import Greeting from './Greeting'; // Importing the default export

function App() {
  return (
    <div>
      <Greeting name="Alice" />
    </div>
  );
}

export default App;

‍

In this example:

• Exporting: Greeting is exported as the default export using export default Greeting;.

• Importing: Greeting is imported without curly braces in App.js using import Greeting from './Greeting';.

‍

Named Export

Named exports allow you to export multiple values or components from a module. You use named exports when you want to export multiple components or other values from a single file.

‍

Example of Named Export

Components.js

import React from 'react';

// Named exports of two components
export const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export const Farewell = ({ name }) => {
  return <h1>Goodbye, {name}!</h1>;
};

‍

App.js

import React from 'react';
import { Greeting, Farewell } from './Components'; // Importing named exports

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Farewell name="Bob" />
    </div>
  );
}

export default App;

In this example:

• Exporting: Both Greeting and Farewell are exported using named exports with export const Greeting = ... and export const Farewell =...

• Importing: Both components are imported with curly braces using import { Greeting, Farewell } from './Components';.

‍

Combining Default and Named Exports

You can also combine default and named exports in the same file:

‍

Components.js

import React from 'react';

// Default export of the main component
const MainComponent = ({ name }) => {
  return <h1>Main Component: {name}</h1>;
};

// Named export of an additional component
export const AdditionalComponent = ({ name }) => {
  return <h2>Additional Component: {name}</h2>;
};

export default MainComponent;

‍

App.js

import React from 'react';
import MainComponent, { AdditionalComponent } from './Components'; // Combining default and named imports

function App() {
  return (
    <div>
      <MainComponent name="Alice" />
      <AdditionalComponent name="Bob" />
    </div>
  );
}

export default App;

‍

In this example:

• Exporting: MainComponent is exported as the default export, and AdditionalComponent is exported as a named export.

• Importing: MainComponent is imported without curly braces, and AdditionalComponent is imported with curly braces.

‍

React Function Component: ref

In React, ref (short for "reference") is a feature that allows you to directly access and interact with DOM elements or React components created within a functional component. Using refs is useful for scenarios where you need to manage focus, measure dimensions, or perform animations directly on DOM elements. In functional components, you use the useRef Hook to work with refs.

‍

Using useRef Hook

The useRef Hook provides a way to create and manage refs in functional components. It returns a mutable object with a .current property that you can use to store a reference to a DOM element or a React component instance.

‍

Basic Usage

Here's a basic example of using useRef to manage a DOM element:

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null); // Create a ref using useRef

  // Function to focus the input element
  const focusInput = () => {
    inputRef.current.focus(); // Access the DOM element via ref
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Click button to focus" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default FocusInput;

‍

Explanation:

Creating the Ref:

• const inputRef = useRef(null); initializes a ref with null as its initial value.

‍

Attaching the Ref:

• <input ref={inputRef} type="text" placeholder="Click button to focus" /> attaches the ref to the input element. inputRef.current will hold the reference to this DOM element after the component mounts.

‍

Using the Ref:

• inputRef.current.focus(); accesses the input element and calls its focus method to programmatically focus it.

‍

Managing Multiple Refs

You can also manage multiple refs by creating multiple useRef instances:

import React, { useRef } from 'react';

function MultipleRefs() {
  const inputRef = useRef(null);
  const buttonRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  const highlightButton = () => {
    buttonRef.current.style.backgroundColor = 'yellow';
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Focus me" />
      <button ref={buttonRef} onClick={highlightButton}>
        Highlight Me
      </button>
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

export default MultipleRefs;

‍

Explanation:

• Multiple Refs: Two refs, inputRef and buttonRef, are created to manage different DOM elements.

• Different Actions: focusInput focuses the input element, while highlightButton changes the background color of the button.

‍

Refs with Functional Components

While refs are commonly used with DOM elements, they can also be used with class components or functional components with forwardRef:

import React, { useRef, forwardRef, useImperativeHandle } from 'react';

// ForwardRef component
const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // Expose methods to parent
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} {...props} />;
});

function Parent() {
  const customInputRef = useRef(null);

  const focusCustomInput = () => {
    customInputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={customInputRef} placeholder="Forwarded Ref Input" />
      <button onClick={focusCustomInput}>Focus Custom Input</button>
    </div>
  );
}

export default Parent;

‍

Explanation:

Forwarding Refs:

• CustomInput uses forwardRef to accept a ref from its parent.

‍

Imperative Handle:

• useImperativeHandle allows the CustomInput component to expose specific methods (focus in this case) to its parent.

‍

Using the Ref:

• focusCustomInput calls the focus method exposed by CustomInput.

‍

React Function Component: TypeScript

Sure! Here’s an example of how to create a React functional component using TypeScript. This example includes basic usage of props and type definitions.

‍

Example: Greeting.tsx

1. Install TypeScript and React Type Definitions

If you haven't set up TypeScript in your React project yet, make sure you have the necessary packages:

npm install typescript @types/react @types/react-dom

‍

2. Create the Component

Here's a simple functional component named Greeting that takes a name prop and renders a greeting message.

// Greeting.tsx

import React from 'react';

// Define the type for props
interface GreetingProps {
  name: string;
}

// Define the functional component
const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Explanation

Type Definition (GreetingProps):

• An interface GreetingProps is defined to specify the type of props that the Greeting component expects. In this case, it expects a name of type string.

‍

Functional Component:

• React.FC<GreetingProps> is used to define the Greeting component as a functional component that uses GreetingProps for its props. React.FC is a type that represents a functional component in React, and it automatically includes children prop typing.

‍

Destructuring Props:

• Inside the functional component, the name prop is destructured from the props object and used in the return statement to render a greeting message.

‍

Using the Component

You can use this Greeting component in another part of your app like this:

// App.tsx

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

const App: React.FC = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

‍

React Function Component vs Class Component

In React, you can create components using either function components or class components. Both have their uses, but function components have become more popular with the introduction of Hooks in React 16.8. Here’s a comparison between the two:

‍

Function Components

Definition: Function components are simpler and easier to write. They are just JavaScript functions that return JSX.

‍

Example:

import React from 'react';

interface Props {
  name: string;
}

const Greeting: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

‍

Key Features:

• Simplicity: Function components are generally more straightforward and concise.

• Hooks: With Hooks, function components can manage state and side effects, making them more powerful. For example, useState and useEffect are commonly used hooks.

• No this Keyword: Function components don’t use this, which can reduce the complexity of handling state and props.

• Performance: They may offer better performance in some cases due to fewer lifecycle methods and less overhead compared to class components.

‍

When to Use:

• For simpler components that do not need to manage state or side effects.

• When you want to use React Hooks to manage state, context, or lifecycle events.

‍

Class Components

Definition: Class components are created by extending React.Component. They offer a more traditional way to write React components and include lifecycle methods.

‍

Example:

import React, { Component } from 'react';

interface Props {
  name: string;
}

interface State {
  count: number;
}

class Greeting extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    // Lifecycle method example
    console.log('Component mounted');
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <button onClick={this.handleClick}>Click me: {this.state.count}</button>
      </div>
    );
  }
}

export default Greeting;

‍

Key Features:

• Lifecycle Methods: Class components have lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount, which can be useful for handling side effects.

• State Management: They have built-in support for managing state using this.state and this.setState.

• this Keyword: Handling the this keyword can be tricky, especially with event handlers and method bindings.

‍

When to Use:

• When you need lifecycle methods that are not easily replicated with hooks.

• For complex components with significant state management and side effects.

‍

Conclusion

Function components have become the preferred choice in modern React development due to their simplicity, ease of use, and the powerful capabilities offered by Hooks, which allow for efficient state management and side effect handling. Their concise syntax and reduced boilerplate make them more readable and easier to maintain.

‍

Conversely, class components, while more verbose and complex, are still important for understanding and maintaining older codebases and libraries that utilize lifecycle methods. Overall, function components align with current best practices and are generally recommended for new projects, but familiarity with class components remains valuable for comprehensive React development and legacy code integration.