React Hooks Introduction

What is Hooks Introduction in React?

Hooks are functions whose names start with "use" that let a function component tap into React features — state, lifecycle, context, refs — without writing a class. They were introduced in React 16.8 and are now the standard way to write React.

Why Hooks Introduction matters

Before hooks, reusing stateful logic meant higher-order components and render props, which produced deeply nested "wrapper hell". A custom hook is just a function, so logic composes as easily as ordinary JavaScript.

Hooks Introduction example

useState(initial)          // local state
useEffect(fn, deps)        // side effects and subscriptions
useContext(Context)        // read a context value
useRef(initial)            // a mutable box that survives renders
useMemo(fn, deps)          // cache an expensive computed value
useCallback(fn, deps)      // cache a function identity
useReducer(reducer, init)  // state with explicit transitions

Key points to remember

• Hooks work only inside function components and other hooks.
• They are matched by call order, so they must run unconditionally at the top level.
• Custom hooks are ordinary functions named use… that call other hooks.
• There is no class equivalent for most newer hooks — this is the direction React is going.

Common mistakes with Hooks Introduction

• Calling a hook inside an if, a loop, or after an early return.
• Calling a hook from a plain helper function that is not a component or a hook.