REACT- FUNCTIONAL COMPONENT

#react #java

Today I am going to explain about Functional Components in REACT which is kind of the basic building block of a React App.

A functional component is simply a JavaScript Function that returns a JSX( React extension for JS describing UI). It's the modern and most preferred way for writing components since it uses Hooks which allows these components to manage states, changes, side effects etc.

The key characteristics of these are:

Stateless or Stateful: Originally used for stateless components, but now can manage state using Hooks.
Simpler Syntax: No need for class, this, or lifecycle methods.
Reusable: Can be composed and reused.
Pure Functions: Ideally, they behave like pure functions—given the same props, they return the same output.

The basic syntax is

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

//Arrow Function

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

//We can call the component like below:

<Greeting name="Ranjani" />

The main benefits of using these components are:

Simpler Syntax : Easier to read, write and maintain.

Hooks Support : Full access to state, effects, context, etc.

Performance: Faster due to less overhead(memory usage, complexity, execution time).

Encourages Best Practices: Promotes pure functions and separation of concerns.

So we can use functional components when we need: