What are React functional components?

What are React functional components?

·Mar 27, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

In my post "4 Ways of creating React components" I mentioned about the Functional components. In this post we will know more about the functional components.

What is a component?

A component is one of the core building blocks of React. Multiple individual components form a parent component.

Two types of components:

  • Functional Components
  • Class components (Next post)

Functional Components

Think of functional components as JavaScript functions.

function Welcome(props) {
    return <h1> Hey, {props.name} </h1>; 

// {props.name} => Return value
// (props) => argument
// Welcome => Function name
const elment = <Welcome name="Rahul" />; 

//Welcome => call a function
// name="Rahul" => pass arguments

You should never modify props. You should use functional components when Your component simply receives props and render something nad does not have its State.(React < 16.8)

In React 16.8, Functional components can hold stat using React hooks. It's a good practice to use functional components over class components.

Why functional components are better?

Transpiled code by babel as some major differences (Class components resolve to more complex code). Major performance boost for functional components. Cleaner and less code.

😀Thanks For Reading | Happy Coding🤗

Did you find this article valuable?

Support Rahul by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
Share this