easyFrontend

What are React Hooks? Name a few common ones.

Q: What are React Hooks? Name a few common ones.

**Core concept (TL;DR).** Hooks are special functions (named use* ) that let **function components** use React features — state, lifecycle/side effects, context — that previously required class components. The everyday ones are useState , useEffect , useContext , useRef , useReducer , useMemo , and useCallback . Common hooks by purpose state: useState · useReducer<

1.1k views

Understand the problem

Assess knowledge of modern React development practices using functional components.

hooksfunctional componentsstateside effects

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Several hooks together

import { useState, useEffect, useRef, useMemo } from "react";

export default function App() {
  const [q, setQ] = useState("");
  const renders = useRef(0);
  renders.current++;
  const upper = useMemo(() => q.toUpperCase(), [q]); // memoized derivation

  useEffect(() => { document.title = q || "empty"; }, [q]); // effect

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="type" />
      <p>UPPER: {upper}</p>
      <small>renders: {renders.current}</small>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are React synthetic events?

What is `PropTypes` and when would you use it?