Functional components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a functional component in React?

A functional component is a JavaScript function that returns React elements to describe what should appear on the screen. It is simple and uses hooks for state and side effects.

beginner

How do you define a functional component that shows a greeting message?

You write a function that returns JSX. For example:<br><pre>function Greeting() {<br>  return &lt;h1&gt;Hello!&lt;/h1&gt;;<br>}</pre>

intermediate

Why do we use hooks like useState in functional components?

Hooks like useState let functional components remember information (state) between renders, making them interactive without needing class components.

intermediate

What is the difference between a functional component and a class component?

Functional components are simpler functions returning JSX and use hooks for features. Class components use ES6 classes and lifecycle methods. Functional components are now preferred.

intermediate

Can functional components have side effects like fetching data? How?

Yes, by using the useEffect hook inside the functional component, you can run code after rendering, like fetching data or updating the document title.

What does a functional component in React return?

A A string

B JSX elements

C A number

D A class instance

Functional components return JSX elements that describe the UI.

Which hook is used to add state to a functional component?

A useState

B useContext

C useEffect

D useReducer

useState is the hook that lets you add state to functional components.

How do you write a simple functional component named Hello that shows 'Hi'?

A function Hello() { return <h1>Hi</h1>; }

B class Hello extends React.Component { render() { return 'Hi'; } }

C const Hello = () => 'Hi';

D function Hello() { console.log('Hi'); }

A functional component returns JSX, so option A is correct.

Which hook lets you perform side effects like data fetching in functional components?

A useCallback

B useState

C useMemo

D useEffect

useEffect runs side effects after rendering.

Why are functional components preferred over class components in modern React?

A They do not support state

B They use more memory

C They are simpler and use hooks for features

D They require more code

Functional components are simpler and use hooks, making them easier to write and maintain.

Explain what a functional component is and how it differs from a class component in React.

Think about how React components can be written as functions or classes.

Describe how you would add state and side effects to a functional component.

Hooks are the key to adding features in functional components.