Creating Functional Components in React

What Are Functional Components?

Functional components are JavaScript functions that return JSX, which describes the UI elements to render. Unlike class components, they do not have their own state or lifecycle methods by default.

They are also called stateless components, but with the introduction of hooks, functional components can now manage state and side effects.

• Simpler syntax compared to class components.
• Easier to read and test.
• Encourage reusable and composable UI pieces.

Creating a Basic Functional Component

Creating a functional component involves defining a JavaScript function that returns JSX. The function name should start with a capital letter to be recognized as a React component.

Here is a simple example of a functional component that displays a greeting message.

Using Props in Functional Components

Props are inputs to components that allow data to be passed from parent to child components. Functional components receive props as function arguments.

Using props, components become dynamic and reusable.

• Props are read-only inside the component.
• They enable customization of component output.

Managing State with Hooks in Functional Components

Before hooks, only class components could manage state and lifecycle events. React hooks, introduced in React 16.8, allow functional components to use state and other React features.

The useState hook is the most common hook for adding state to functional components.

• useState returns a state variable and a function to update it.
• State updates cause the component to re-render with new data.