29 October 2020

#ReactJS

#ReactJS

Key Concepts


Level Topic Subtopics
Basic Introduction What is React, Features of React, Advantages over other frameworks, Virtual DOM, JSX
Components Functional Components, Class Components, Props, Default Props, PropTypes
State Management useState Hook, Class Component State, setState(), Initial State, State vs Props
Rendering Conditional Rendering, Lists & Keys, Rendering Arrays, Fragments, Inline Rendering
Events Handling Events, Synthetic Events, Event Binding, Passing Arguments, Event Bubbling
Intermediate Hooks useEffect, useContext, useRef, useMemo, useCallback
Forms Controlled Components, Uncontrolled Components, Form Validation, useForm Libraries
Routing React Router Basics, Route Parameters, Nested Routes, Redirects, Protected Routes
Styling CSS Modules, Styled Components, Emotion, Inline Styles, Tailwind with React
Context API Creating Context, useContext Hook, Context vs Redux, Context Performance, Nested Contexts
Advanced State Management Redux, Redux Toolkit, Middleware (Thunk, Saga), Zustand, Recoil
Performance Optimization Memoization, React.memo, Code Splitting, Lazy Loading, Suspense
Server-Side Rendering Next.js Basics, Static Site Generation (SSG), Incremental Static Regeneration (ISR), SSR vs CSR, Hydration
Testing Jest, React Testing Library, Enzyme, Snapshot Testing, Mocking APIs
Error Handling Error Boundaries, try-catch in async calls, Fallback UI, Logging Errors, Monitoring
Expert Architecture & Patterns Higher-Order Components (HOC), Render Props, Compound Components, Custom Hooks, Controlled vs Uncontrolled Patterns
Advanced Performance React Concurrent Mode, Suspense for Data Fetching, React Profiler, Optimization with Webpack, Tree Shaking
Scalability Monorepos with React, Micro-Frontends, Module Federation, Large-Scale Folder Structures, Design Systems
Integrations GraphQL with React (Apollo, Relay), WebSockets, WebRTC, REST APIs, gRPC
Deployment & CI/CD Dockerizing React Apps, CI/CD Pipelines, Hosting (Vercel, Netlify, AWS Amplify), Performance Budgets, SEO Optimization

Interview question

1. Components

  1. What are React components?
  2. Differentiate between functional and class components.
  3. What is JSX and why is it used in React?
  4. How do you pass data from parent to child components?
  5. What are default props in React?
  6. How do you validate props in React?
  7. What is the difference between props and state?
  8. Explain component lifecycle methods in class components.
  9. What is the difference between controlled and uncontrolled components?
  10. How do you conditionally render components in React?
  11. What are fragments and why are they used?
  12. How do you render lists in React?
  13. What is the significance of keys in lists?
  14. Explain React.memo and its use cases.
  15. How do you share data between sibling components?
  16. What are Higher-Order Components (HOC)?
  17. Differentiate between smart and dumb components.
  18. What are render props in React?
  19. How do you optimize re-rendering in React components?
  20. What is the difference between PureComponent and React.Component?
  21. How do you handle errors in React components?
  22. What are portals in React?
  23. Explain lazy loading of components.
  24. How do you structure a large React project?
  25. What are compound components?

2. Hooks

  1. What are React hooks?
  2. Explain the useState hook with an example.
  3. How does useEffect work in React?
  4. Differentiate between useEffect and componentDidMount.
  5. What are rules of hooks in React?
  6. What is useContext hook and how is it used?
  7. Explain the useReducer hook with an example.
  8. What is the difference between useCallback and useMemo?
  9. What is the useRef hook used for?
  10. How do you build custom hooks in React?
  11. Explain performance optimizations with useMemo.
  12. What is the difference between controlled and uncontrolled forms with hooks?
  13. How can you clean up side effects in useEffect?
  14. What is the difference between useLayoutEffect and useEffect?
  15. How do you fetch data using hooks?
  16. Explain how hooks replace lifecycle methods.
  17. What is the useImperativeHandle hook?
  18. How do you handle global state with hooks?
  19. Explain batching of state updates with hooks.
  20. What are stale closures in hooks?
  21. How do you debounce input using hooks?
  22. Explain polling with useEffect.
  23. What is the difference between useId and useRef?
  24. What are hook dependency arrays?
  25. Explain pitfalls of hooks and how to avoid them.

3. State Management

  1. What is state in React?
  2. Differentiate between local and global state.
  3. What are the drawbacks of prop drilling?
  4. Explain Context API for state management.
  5. How do you use Redux with React?
  6. What are reducers in Redux?
  7. Explain actions and action creators in Redux.
  8. What is Redux Toolkit?
  9. How does middleware work in Redux?
  10. Explain Redux Saga with an example.
  11. What is Zustand and when to use it?
  12. Differentiate between Redux and MobX.
  13. What are selectors in Redux?
  14. How do you persist Redux state?
  15. Explain Recoil for state management.
  16. How do you manage asynchronous state in Redux?
  17. What is the difference between Flux and Redux?
  18. What are effects in Redux Thunks vs Sagas?
  19. How do you debug Redux apps?
  20. What are best practices for managing state in large apps?
  21. Explain the concept of immutable state updates.
  22. How do you structure Redux store?
  23. What are atoms in Recoil?
  24. How does Zustand differ from Redux?
  25. When should you avoid Redux?

4. Routing

  1. What is React Router?
  2. How do you install and configure React Router?
  3. Explain BrowserRouter and HashRouter.
  4. What is the difference between Link and NavLink?
  5. How do you handle dynamic routing in React?
  6. Explain route parameters with examples.
  7. What are nested routes in React Router?
  8. How do you implement redirects?
  9. Explain protected routes in React.
  10. How do you handle authentication in routing?
  11. What is the use of useNavigate hook?
  12. Explain the useLocation hook.
  13. What is the difference between Switch and Routes?
  14. How do you handle 404 routes in React Router?
  15. Explain lazy loading routes.
  16. How do you handle query parameters in React Router?
  17. What is the difference between exact and strict in routing?
  18. How do you animate route transitions?
  19. Explain useHistory hook in older React Router.
  20. What is outlet in nested routes?
  21. How do you protect routes with JWT authentication?
  22. Explain MemoryRouter use cases.
  23. How do you integrate Redux with React Router?
  24. What is server-side routing vs client-side routing?
  25. Explain hash-based routing.

5. Performance Optimization

  1. What is reconciliation in React?
  2. How does the virtual DOM improve performance?
  3. What is React Fiber?
  4. How do you optimize re-renders in React?
  5. Explain React.memo and PureComponent.
  6. What is code splitting in React?
  7. How do you implement lazy loading?
  8. Explain dynamic imports in React.
  9. What is tree shaking in React apps?
  10. How do you measure React performance?
  11. What is React Profiler?
  12. How do you optimize large lists in React?
  13. Explain windowing with react-window or react-virtualized.
  14. How do you cache expensive calculations?
  15. What are Web Workers and how can React use them?
  16. Explain Suspense for data fetching.
  17. How do you batch state updates in React?
  18. Explain hydration in React SSR.
  19. How do you optimize React context performance?
  20. What is concurrent rendering?
  21. How do you minimize bundle size?
  22. Explain service workers for caching React apps.
  23. How do you improve time-to-interactive in React apps?
  24. What is Reselect in Redux?
  25. How do you prevent memory leaks in React?

6. Forms & Validation

  1. What are controlled components in forms?
  2. What are uncontrolled components in forms?
  3. How do you use useState for form inputs?
  4. Explain form validation in React.
  5. How do you handle multiple inputs in a form?
  6. What is the difference between controlled vs uncontrolled form validation?
  7. Explain useForm hook from React Hook Form.
  8. How do you integrate Formik in React?
  9. How do you handle async validation in forms?
  10. What are custom form hooks?
  11. How do you reset form values?
  12. How do you handle checkbox and radio inputs in forms?
  13. Explain nested forms in React.
  14. How do you handle file uploads in forms?
  15. What is the role of useRef in uncontrolled forms?
  16. How do you manage form state globally?
  17. How do you handle conditional form fields?
  18. What is form serialization?
  19. How do you integrate Yup with Formik?
  20. Explain debounce validation in forms.
  21. How do you show error messages in forms?
  22. How do you disable a submit button conditionally?
  23. What is optimistic UI in forms?
  24. How do you implement dynamic forms?
  25. How do you test form components?

7. Testing

  1. What are the different testing levels in React?
  2. How do you test React components with Jest?
  3. What is React Testing Library?
  4. How do you render a component in tests?
  5. How do you simulate user events in testing?
  6. What are snapshot tests in React?
  7. How do you mock API calls in tests?
  8. Explain mocking hooks in React tests.
  9. How do you test asynchronous code in React?
  10. What is shallow rendering in Enzyme?
  11. How do you test props in React components?
  12. How do you test state updates in React?
  13. What is the difference between integration and unit tests?
  14. How do you test context-based components?
  15. How do you test React Router components?
  16. What are mock functions in Jest?
  17. How do you test Redux-connected components?
  18. How do you use Cypress for E2E testing in React?
  19. How do you measure test coverage?
  20. What is Test Driven Development (TDD) in React?
  21. How do you test error boundaries?
  22. How do you mock window and browser APIs?
  23. How do you test lazy loaded components?
  24. How do you handle flaky tests?
  25. What are best practices for testing React apps?

8. Server-Side Rendering (SSR) & Next.js

  1. What is the difference between CSR and SSR?
  2. What is Next.js and why use it?
  3. How do you implement SSR in Next.js?
  4. What are getStaticProps and getServerSideProps?
  5. Explain Incremental Static Regeneration (ISR).
  6. How do you handle API routes in Next.js?
  7. What is static site generation?
  8. How does hydration work in React SSR?
  9. What is pre-rendering in Next.js?
  10. How do you deploy a Next.js app?
  11. What are the benefits of ISR?
  12. How do you optimize SEO in SSR apps?
  13. What is the difference between SSG and SSR?
  14. How do you fetch data in Next.js?
  15. What is dynamic routing in Next.js?
  16. How do you implement authentication in Next.js SSR?
  17. Explain getInitialProps and why it?s deprecated.
  18. How do you use middleware in Next.js?
  19. What is API caching in Next.js?
  20. Explain environment variables in Next.js.
  21. What is fallback in SSG pages?
  22. How do you use ISR with revalidate?
  23. How do you integrate GraphQL with SSR?
  24. What is streaming SSR in React 18?
  25. How does Next.js handle image optimization?

9. Styling in React

  1. What are the different ways to style React components?
  2. Explain CSS modules in React.
  3. What is the difference between inline styles and CSS files?
  4. What are styled-components?
  5. How do you use Emotion for styling in React?
  6. Explain Tailwind CSS with React.
  7. What are advantages of CSS-in-JS?
  8. How do you apply conditional styles in React?
  9. How do you manage global styles in React?
  10. What is theming in styled-components?
  11. How do you implement dark mode in React?
  12. How do you use classnames library?
  13. What is CSS scoping in React?
  14. How do you implement animations in React?
  15. Explain React Spring.
  16. How do you integrate Framer Motion?
  17. How do you implement responsive design in React?
  18. What is utility-first CSS?
  19. Explain BEM methodology in React projects.
  20. How do you optimize CSS bundle size?
  21. How do you load external stylesheets in React?
  22. How do you apply styles conditionally with props?
  23. What are global style resets?
  24. How do you manage CSS variables in React?
  25. What are best practices for styling large React apps?

10. Advanced Concepts & Architecture

  1. What are Higher-Order Components (HOC)?
  2. What are Render Props?
  3. Explain Compound Components pattern.
  4. What is Context API and when to use it?
  5. Explain Micro-Frontend architecture with React.
  6. How do you structure a scalable React project?
  7. What is React Concurrent Mode?
  8. Explain Suspense for data fetching.
  9. What is Server Components in React 18?
  10. How do you implement Module Federation with React?
  11. What are design systems in React apps?
  12. Explain Clean Architecture in React projects.
  13. What are monorepos in React development?
  14. How do you use Nx for React monorepos?
  15. Explain container-presenter pattern.
  16. What are uncontrolled vs controlled patterns?
  17. How do you implement pub-sub pattern in React?
  18. What is dependency injection in React?
  19. How do you handle feature toggles in React apps?
  20. What are Edge Functions with React?
  21. How do you use WebSockets in React?
  22. What are Web Workers in React apps?
  23. How do you handle multi-language apps in React?
  24. Explain GraphQL integration with React.
  25. How do you design enterprise-scale React applications?

Related Topics


-
Labels: , ,