React.js Fundamentals
· By Saurabh Editorial · React
The core React model — components, state, effects, and rendering — explained clearly.
What is React?
Components
The essential hooks
State, props, and rendering
Data fetching
Best practices
React is a library for building user interfaces with reusable, declarative components. You describe what the UI should look like for a given state, and React updates the DOM efficiently when that state changes.
Components are functions that return JSX. They accept props, hold local state, and compose to form the entire app. Keep them small, single-purpose, and presentational where possible.
Props flow down, events flow up. State lives where it is needed and lifts up only when shared. React re-renders when state or props change — keep state minimal to avoid unnecessary renders.
Prefer a library like TanStack Query or SWR over manual useEffect+fetch. They handle caching, deduping, retries, and revalidation so your components stay declarative.
- useState — local component state.
- useEffect — side effects after render.
- useMemo / useCallback — memoize expensive values and stable references.
- useRef — mutable values and DOM references.
- useContext — read shared state without prop drilling.
- useReducer — predictable state transitions for complex logic.
- Lift state only when truly shared.
- Memoize at boundaries, not everywhere.
- Use keys correctly in lists.
- Split components by responsibility, not by file size.
- Type props with TypeScript for safer refactors.