React Function Components

What is Function Components in React?

A function component is a JavaScript function that takes a props object and returns JSX. Its name must start with a capital letter so JSX treats it as a component rather than an HTML tag. Function components plus hooks are how all modern React is written.

Why Function Components matters

Function components are shorter than class components, have no confusing this binding, and are the only form that can use hooks. Every new React feature since 2019 targets them.

Function Components example

// Button.jsx
export default function Button({ label, onClick }) {
  return <button className="btn" onClick={onClick}>{label}</button>;
}

// App.jsx
import Button from './Button';

export default function App() {
  return <Button label="Apply now" onClick={() => alert('Applied!')} />;
}

How this works

Button receives an object { label, onClick } and destructures it in the parameter list. In App the component is used like a tag, and each attribute becomes a key on that props object.

Key points to remember

• Component names must be capitalised — <button> is a DOM tag, <Button> is your component.
• One component per file is the common convention, exported as the default.
• A component must return JSX, a string, a number, an array, or null — returning undefined is an error.
• Returning null renders nothing while keeping the component mounted.

Common mistakes with Function Components

• Lowercase component names, which React renders as unknown HTML tags without warning you loudly.
• Declaring a component inside another component — its identity changes every render, remounting the whole subtree.
• Forgetting the return, or adding a newline after return before the JSX (automatic semicolon insertion returns undefined).