JavaScript
Python
Java
React
Sorting Visualizer
Complexity Analyzer
Coding Patterns
1. JSX & Rendering Basics
1.1. JSX: Writing Markup
1.2. JSX: JavaScript Expressions
1.3. JSX: Specifying Attributes
1.4. Defining a Component
1.5. Fragments (`<>...</>`)
1.6. Conditional Rendering: `if`
1.7. Conditional Rendering: Ternary `?`
1.8. Conditional Rendering: Logical `&&`
1.9. Rendering Lists with `.map()`
1.10. The `key` Prop
2. Components & Props
2.1. Passing Props
2.2. Destructuring Props
2.3. Default Prop Values
2.4. The `children` Prop
2.5. Forwarding Props with Spread Syntax
2.6. Passing JSX as Props
2.7. Pure Components & Re-rendering
2.8. Prop Types (Conceptual)
2.9. Component Composition
2.10. Props are Read-Only
3. State & `useState`
3.1. The `useState` Hook
3.2. State is a Snapshot
3.3. State Updates are Batched
3.4. Functional `setState` Updates
3.5. Lazy Initial State
3.6. Updating Objects in State
3.7. Updating Arrays in State
3.8. Lifting State Up
3.9. Resetting State with a `key`
3.10. The Rules of Hooks
4. Events & Forms
4.1. Handling Events
4.2. Passing Event Handlers as Props
4.3. Event Propagation
4.4. Preventing Default Behavior
4.5. The SyntheticEvent Object
4.6. Controlled Components (Forms)
4.7. The `textarea` Tag
4.8. The `select` Tag
4.9. Handling Multiple Inputs
4.10. Uncontrolled Components
5. Lifecycle & `useEffect`
5.1. The `useEffect` Hook
5.2. The Dependency Array
5.3. `useEffect` with No Dependencies
5.4. `useEffect` with Empty Dependencies `[]`
5.5. The Cleanup Function
5.6. `useEffect` Example: Timer
5.7. `useEffect` Example: Data Fetching
5.8. Stale Closures in `useEffect`
5.9. The `useLayoutEffect` Hook
5.10. The Component Lifecycle Phases
6. Refs & DOM Interaction
6.1. `useRef` to Access DOM Nodes
6.2. `useRef` as a Generic Container
6.3. `useRef` vs. `useState`
6.4. The `.current` Property
6.5. `forwardRef`
6.6. `useImperativeHandle`
6.7. Ref Callback
6.8. Ref Initial Value
6.9. Common Ref Use Cases
6.10. Portals
7. Advanced Hooks
7.1. The `useReducer` Hook
7.2. When to use `useReducer`
7.3. The `dispatch` Function
7.4. The `useCallback` Hook
7.5. `useCallback` Dependencies
7.6. The `useMemo` Hook
7.7. `useMemo` vs `useCallback`
7.8. Custom Hooks
7.9. The `useId` Hook
7.10. `useTransition` Hook
8. Context API
8.1. What is Context?
8.2. `React.createContext`
8.3. Context `Provider`
8.4. The `useContext` Hook
8.5. Context Default Value
8.6. Updating Context from a Nested Component
8.7. Context Performance Caveats
8.8. Optimizing Context with `useMemo`
8.9. Using Multiple Contexts
10. When to Use Context
9. Performance Optimization
9.1. Using the React Profiler
9.2. `React.memo`
9.3. Using `memo` with `useCallback`
9.4. Using `memo` with `useMemo`
9.5. Virtualizing Long Lists
9.6. Code Splitting with `React.lazy`
9.7. `Suspense` for Code Splitting
9.8. Optimizing Context Re-renders
9.9. Colocating State
9.10. Bundle Analysis
10. Component Patterns & Theory
10.1. Higher-Order Component (HOC) Pattern
10.2. Render Props Pattern
10.3. Error Boundaries
10.4. Reconciliation & "Diffing"
10.5. React Server Components (RSC)
10.6. The `"use client"` Directive
10.7. Hydration
10.8. `React.StrictMode`
10.9. Composition over Inheritance
10.10. "Thinking in React"
Interview Questions
1. What is React?
2. What is JSX?
3. What is the difference between state and props?
4. What are React Hooks?
5. What is the Virtual DOM?
6. What is the difference between a controlled and an uncontrolled component?
7. Describe the component lifecycle in React.
8. What is the `key` prop and why is it important?
9. What does "lifting state up" mean?
10. What is a Higher-Order Component (HOC)?
11. What is the difference between a class component and a functional component?
12. What is the Context API?
13. What is a `ref` used for?
14. What is a SyntheticEvent?
15. What is React Router?
16. What is prop drilling and how can you avoid it?
17. What does `React.memo` do?
18. Explain the dependency array in `useEffect`.
19. What is a custom Hook?
20. What is an error boundary?
21. What is a React Fragment?
22. What does it mean that "state is a snapshot"?
23. What are portals?
24. What is the render prop pattern?
25. What is reconciliation?
26. What are the two main rules of Hooks?
27. What is the difference between `useCallback` and `useMemo`?
28. What is React Fiber?
29. What does `<React.StrictMode>` do?
30. Differentiate between SSR and SSG.
31. When should you use the functional form of `setState`?
32. What will be rendered?
33. Why would you use a state management library like Redux or Zustand?
34. What is hydration in the context of SSR?
35. What is `React.PureComponent`?
36. What is `forwardRef` used for?
37. How do you implement code-splitting in React?
38. Why must React components start with a capital letter?
39. Why do you need a cleanup function in `useEffect`?
40. When would you use `useLayoutEffect` instead of `useEffect`?
41. How does React differ from frameworks like Angular or Vue?
42. What is the `children` prop?
43. Why is immutability important in React?
44. Can you explain a potential pitfall of conditional rendering with `&&`?
45. How do you handle accessibility in React?
46. What is the purpose of spread attributes in JSX?
47. When is `useReducer` a better choice than `useState`?
48. What are the benefits of React Server Components?
49. What happens when you click the button?
50. How would you make the alert in the previous question show the updated value?
51. Why is using the array index as a `key` an anti-pattern?
52. What problem does the `useId` hook solve?
53. What is `useTransition` used for?
54. How does `useDeferredValue` work?
55. What is the difference between React and React Native?
56. How would you find a performance bottleneck in a React app?
57. What is the output?
58. How do you fix the interval bug from the previous question?
59. What happens when the button is clicked?
60. Name three ways to optimize React performance.
61. Compare different ways of styling React components.
62. What is `React.Children` used for?
63. What will this render?
64. Can you use React without ES6?
65. Why is immutability important for state?
66. What will be logged on click?
67. What will be logged on click?
68. What will this render?
69. What is rendered?
70. How would you fix the previous example?
71. Will the `ThemedButton` re-render when the parent state changes?
72. What happens on click?
73. What is logged?
74. What is logged here?
75. When should you NOT use `React.memo`?
76. What is the philosophy of React Testing Library?
77. What will be rendered?
78. What does this component render?
79. What will be the value of `count`?
80. What is rendered when the button is clicked?
81. How do you fix the bug in the previous question?
82. What is logged when this component mounts?
83. What is the value of `ref.current` during the first render?
84. What happens when you pass `undefined` as a component?
85. What does this component render?
86. What is the output?
87. What is logged?
88. What is the output?
89. What is the output?
90. What is rendered?
91. What is the output?
92. What is the output?
93. What is the value of `isSame`?
94. What is the output?
95. What will this code do?
96. How would you fix the infinite loop?
97. What is logged?
98. What is the output?
99. What is logged?
100. What happens here?
Toggle Sidebar
Code Playground
Loading Terminal...