Function components in React are plain JavaScript functions that are used as React components. They have access to component features via Hooks. Use this tag for questions regarding the usage or behavior of function components. Do not use this tag if the question just uses them, but doesn't specifically asks about them.
Function components (misleadingly also known as "functional" components or stateless components) are JavaScript functions that are used as components. They are essentially render functions (their return value determines what the component renders).
They receive props as an argument.
This is an example of a function component:
function HelloWorld({ color }) {
return <div style={{ color }}>Hello World!</div>;
}
ReactDOM.render(
<HelloWorld color="blue" />,
document.body
);
Function components are called stateless because they don't have a component instance bound to them, but with the addition of Hooks, they also have access to state, commit-phase side effects, etc.
Because Hooks can't be used with class components, function components have slightly different features and use-cases, and they are not always interchangeable with class components.
Official documentation: Components and Props
