A functional component, more commonly called a **[function](/javascript/functions-in-javascript) component**, is a [JavaScript](/courses/javascript) [function](/javascript/functions-in-javascript) that returns [React](/courses/reactjs) UI. A basic component looks like this: ```jsx function Welcome() { return

Welcome to React

; } ``` You can then use it like a custom [HTML](/courses/html) element: ```jsx ``` ### Components Are Reusable UI Units Instead of writing the same markup repeatedly: ```jsx

React Course

JavaScript Course

Next.js Course

``` you can create a component: ```jsx function CourseTitle({ title }) { return

{title}

; } ``` and reuse it: ```jsx ``` The component defines the UI structure while props provide different data. ### Function Components Can Have State Modern function components can use [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) such as `useState`: ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( ); } ``` Function components can therefore handle: ```text Props State Events Effects Context Refs Reusable logic through custom Hooks ``` ### Components Should Be Predictable During rendering, a component should primarily calculate UI from its current inputs: ```text props + state + context ↓ UI ``` Side effects such as subscriptions or synchronizing with external systems should be handled using the appropriate [React](/courses/reactjs) APIs rather than directly during rendering. ### Interview-Ready Answer A React function component is a [JavaScript](/courses/javascript) function that describes a piece of UI and can receive props as input. Modern function components can manage state, effects, context, refs, and reusable logic through [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback). They are the standard way of defining components in modern React applications.