DEV Community

loading...
Cover image for Functional Component in React

Functional Component in React

olenadrugalya profile image Olena Drugalya ・2 min read

This blogpost continues series of posts exploring React components. It describes Functional Component - one of building blocks in React application.

Purpose of Functional Component

It is a building block of every React application, a reusable and independent piece of code written to perform a particular task.

Creating Functional Component

This component is called functional because its a JavaScript function.

We create functional component in 2 ways:

  1. Normal JavaScript function
  • keyword function
  • name of component - should be capital letter
  • parameters - accepts props
  • return - returns React element

Example:

function MyComponent(props) {
  return <h1>Some {props.text}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

2.Arrow ES6 function

  • keyword const
  • name of component - should be capital letter
  • parameters - accepts props
  • return - returns React element

Example:

const MyComponent = (props) => {
  return <h1>Some {props.text}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Usage of Functional Component

Before React hooks, functional components have been called stateless because the state was only declared in class-based components (we will explore them in my next blogpost). Also there were some lifecycle methods available only in class-based components.

With the release of hooks we can use functional component anywhere we want, we just need to know which hook to use and where.

Why it's a good thing to use functional components:

  • they are easy to construct and understand
  • they are easy to test and debug
  • they are highly reusable
  • and they don't have THIS! :)

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)

Buy Me a Coffee at ko-fi.com

Discussion

pic
Editor guide
Collapse
danytulumidis profile image
Dany Tulumidis

I love functional components. Its just leaner and beautiful to me :D

Collapse
olenadrugalya profile image
Olena Drugalya Author

I completely agree :) and easy to use with hooks