[go: up one dir, main page]
Scribd
Upload
29 views2 pages

React Interview CheatSheet

This document is a cheat sheet for React.js interview questions covering key concepts such as components, hooks, lifecycle methods, advanced concepts, performance optimization, routing, forms, and Redux. It provides essential definitions and distinctions, like the differences between functional and class components, the use of hooks, and state management techniques. Additionally, it highlights performance optimization strategies and the use of Redux for centralized state management.

Uploaded by

sagargslv0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views2 pages

React Interview CheatSheet

This document is a cheat sheet for React.js interview questions covering key concepts such as components, hooks, lifecycle methods, advanced concepts, performance optimization, routing, forms, and Redux. It provides essential definitions and distinctions, like the differences between functional and class components, the use of hooks, and state management techniques. Additionally, it highlights performance optimization strategies and the use of Redux for centralized state management.

Uploaded by

sagargslv0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

React.

js Interview Questions Cheat Sheet

Basics
- React: JavaScript library for building UI using components.
- Features: Virtual DOM, JSX, component-based, unidirectional data flow.
- JSX: JavaScript + XML syntax used to describe UI.
- Virtual DOM: Lightweight copy of real DOM; updates efficiently using diffing.
- Components: Reusable UI blocks (Class or Functional).
- Functional vs Class Components: Functional (Hooks), Class (Lifecycle).
- Props: Read-only data passed to components.
- State: Local, mutable data managed within a component.
- Event Handling: Uses camelCase syntax (onClick={handleClick}).
- Controlled vs Uncontrolled: Controlled uses state, Uncontrolled uses ref.
- Keys: Unique IDs for list items for efficient diffing.
- useState: Adds state to functional components.
- useEffect: Side effects (e.g., fetch, timers).
- Props vs State: Props are external; state is internal and mutable.
- Default Props: Set default values for props.
- Conditional Rendering: Use &&, ternary, or if.
- Fragments: <></> or <React.Fragment> to group elements.

Hooks
- Hooks: Functions to use state/lifecycle in functional components.
- useEffect vs useLayoutEffect: useEffect after paint, useLayoutEffect before paint.
- useRef: Access DOM or persist values.
- useMemo: Memoize expensive computation.
- useCallback: Memoize functions.
- Hook Rules: Top-level only, same order, not in loops.

Lifecycle (Class)
- Lifecycle Phases: Mounting, Updating, Unmounting.
- componentDidMount: Runs once after mount.
- componentDidUpdate: Runs after re-render.
- componentWillUnmount: Cleanup before removal.
- getDerivedStateFromProps: Sync props to state.
- shouldComponentUpdate: Prevent unnecessary renders.

Advanced Concepts
- Lifting State Up: Move state to common parent.
- Context API: Avoid prop drilling.
- Prop Drilling: Passing props through multiple levels.
- HOC: Function that takes and returns a component.
- Render Props: Share logic via function props.
- Lazy Loading: Load components only when needed.
- Code Splitting: Split bundles with React.lazy and Suspense.
- Reconciliation: Efficient DOM diffing algorithm.
- Error Boundaries: Catch errors using componentDidCatch.
- Portals: Render outside root element (e.g., modals).
- PureComponent: Shallow prop/state comparison.

Performance Optimization
- Unnecessary Renders: Caused by prop/state changes.
- Prevent Re-renders: React.memo, useMemo, useCallback.
- React.memo: Memoizes functional components.
- useMemo vs React.memo: useMemo for values, React.memo for components.

Routing & Forms


- React Router: Uses Route, Link, BrowserRouter.
- Routing Types: Client-side, dynamic, nested.
- Forms: onChange, onSubmit handlers with state.
- Form Validation: Use state or libraries (Formik, Yup).

Redux
- Redux: Centralized state container.
- Core Concepts: Actions, Reducers, Store.
- Redux vs Context: Redux = structured, Context = simple.
- Redux Toolkit: Simplified Redux logic and setup.
- Middleware (redux-thunk): Enables async logic.

You might also like