Maksim IvanovProgramming tutorials

React Functional Components

March 10, 2019

The simplest way to define a component in React is to use function.

You just declare a function that receives props and returns some JSX layout.

Here is an example:

const Header = (props) => <h1>{props.text}</h1>;

You can use object destructuring to get specific props:

const Header = ({text}) => <h1>{text}</h1>;

Why Use Functional Components

Overall functions is preferred way of writing components in react.

This is due to the fact that functions, especially if they are pure are easy to read, test and reason about.

If you have a component that doesn’t have internal state and doesn’t have event listeners defined, and doesn’t rely on lifecycle methods - use functional component.

With release of hooks - it became possible to have state and perform side effects even in functional components.

Share this post: