What are React Hooks?

React Hooks are functions with a use prefix, such as useState, useEffect and useContext, that let function components hold state, run side effects and share logic. They were introduced in React 16.8 and replaced class components as the standard pattern. Hooks must be called at the top level of a component or of another hook.

What is the difference between useEffect and useLayoutEffect?

Both run side effects after a render. useEffect runs after the browser has painted, so it does not block the screen and suits data fetching, subscriptions and logging. useLayoutEffect runs synchronously before paint, for reading layout or measuring DOM nodes when a flicker would otherwise be visible. Prefer useEffect unless you need the measurement.

What is a custom hook in React?

A custom hook is a plain function whose name starts with use and that calls other hooks. It packages stateful logic, for example a subscription to a chat room with its cleanup, so several components can reuse it with one call. Custom hooks share logic, not state: each component that calls the hook gets its own independent state.

Why can't you call hooks inside a condition or loop?

React identifies each hook by the order in which it is called during a render. If a hook sits inside an if statement or a loop, the order can change between renders and React will attach state to the wrong hook. The rules of hooks, enforced by the eslint-plugin-react-hooks linter, keep the call order stable.

How do hooks work with a chat SDK?

A chat SDK usually manages the real-time connection itself and gives you callbacks or hooks for what changes: new messages, presence, typing, unread counts. Your app keeps its own state, such as the signed-in user and the open room, in hooks or a store and passes it in. Ethora's React chat component follows this pattern and supports React 19.

Glossary

React Hooks

Functions such as useState and useEffect that give React function components state, side effects and reusable logic. Hooks replaced class components as the standard way to write React.

General definition

React Hooks are functions, all named with a use prefix, that let a function component tap into React features that once required a class: local state, lifecycle-style side effects, context and refs. They arrived in React 16.8 in 2019 and are now the default way to write React components. A hook is called at the top level of a component or of another hook, never inside loops or conditions, so React can track each call in the same order on every render.

The hooks most codebases use daily:

useState and useReducer for local state.
useEffect for side effects that sync with something outside React, such as opening a socket or subscribing to an event.
useContext to read values from a provider without prop drilling.
useRef for mutable values and DOM nodes that should not trigger renders.
useMemo and useCallback to skip recomputing values and recreating functions.
useSyncExternalStore to subscribe safely to a store that lives outside React.
React 19 additions: use for reading a promise or context, useActionState and useOptimistic for form and optimistic UI flows.

A custom hook is any function that starts with use and calls other hooks. It is the main way to package stateful logic for reuse: a team might write useMessages(roomId) or useOnlineStatus() to hide subscriptions, caching and cleanup behind one call. In real-time UIs the effect cleanup function matters as much as the effect itself, because a chat component that mounts and unmounts must unsubscribe from the room or the connection leaks listeners. The React Compiler, released as stable in 2025, automates much of the memoisation that useMemo and useCallback used to require by hand.

In the Ethora ecosystem

The Ethora React chat component (@ethora/chat-component on npm, React 19 ready) is built with hooks internally and is designed to sit inside a hooks-based app. Rather than making you manage the XMPP connection, room subscriptions and message cache in your own effects, the Chat SDK for React owns that lifecycle and exposes configuration and callbacks so your app can respond to new messages, presence changes and typing activity, and pass in the current user, room and theme.

That split keeps your own components simple: you hold app-level state (who is signed in, which room is open) in your existing hooks or store and hand it down as props. Chat state that is expensive to get right, such as unread counts and the last message per room, is computed server-side by Ethora and delivered to the client, so a custom hook in your app does not need to replay history to work it out. See state management for how that fits with Redux, Zustand or context.

React Hooks

General definition

In the Ethora ecosystem

Build with Ethora’s open SDKs

Talk to our team

Pick a time that works for you