← React Beginner Questions - Set 6 Q60

What is a functional component in React?

React Beginner Questions - Set 6

A function that receives props and returns JSX. With hooks it holds state, effects and refs — the class distinction is historical.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { useState } from 'react';

// Props in, JSX out; state comes from hooks
export default function LikeButton({ initial = 0 }) {
  const [likes, setLikes] = useState(initial);

  return (
    <button onClick={() => setLikes(l => l + 1)} aria-pressed={likes > 0}>
      ♥ {likes}
    </button>
  );
}

// It is just a function: callable, composable, testable
// <LikeButton initial={5} />

What to notice

• The name must start with a capital letter when used as a component; lower-case names become HTML tags.
• Hooks made function components capable of everything classes did, minus error boundaries.
• Because it is a plain function, a component can be tested by calling it — though rendering is preferred.