React Flashcards
(150 cards)
1
Q
What is React?
A
A JavaScript library for building user interfaces.
2
Q
Who created React?
A
Facebook.
3
Q
What is JSX?
A
JavaScript XML – a syntax extension that lets you write HTML in JS.
4
Q
What is a component in React?
A
A reusable piece of UI.
5
Q
What are the two types of components?
A
Functional and Class components.
6
Q
What is a functional component?
A
A function that returns JSX.
7
Q
How do you define a functional component?
A
function MyComponent() { return <div />; }
8
Q
What is a hook?
A
A function that lets you use state or lifecycle in functional components.
9
Q
What does useState do?
A
Adds state to functional components.
10
Q
What does useEffect do?
A
Runs side-effects like data fetching or subscriptions.
11
Q
What are props?
A
Inputs passed to components.
12
Q
How are props passed?
A
As attributes on JSX elements.
13
Q
What is state?
A
Data that changes over time and triggers re-render.
14
Q
How do you lift state up?
A
Move it to a common ancestor and pass it down via props.
15
Q
Can props be modified?
A
No, props are read-only.
16
Q
What is the second argument of useEffect?
A
A dependency array.
17
Q
When does useEffect run?
A
After every render unless dependencies restrict it.
18
Q
How to run useEffect only once?
A
Pass an empty dependency array: [].
19
Q
How to clean up in useEffect?
A
Return a cleanup function inside useEffect.
20
Q
What is a common use case for useEffect?
A
Fetching data from an API.
21
Q
How do you conditionally render in React?
A
Using if, ternary (? :), or logical AND (&&).
22
Q
What is the shorthand for conditional rendering?
A
{condition && <Component />}
23
Q
Can you use switch-case inside JSX?
A
Usually outside JSX, then return appropriate component.
24
Q
What is the benefit of keys in a list?
A
Helps React identify which items changed.
25
How to render a list in React?
Use `.map()` to return an array of components.
26
Why should keys be unique in lists?
To help React optimize re-rendering.
27
Can index be used as a key?
Only if list is static and does not change.
28
What is a controlled component?
An input element controlled by React state.
29
What is an uncontrolled component?
An input not managed by state; uses refs.
30
How to update form input value?
Use `onChange` handler with `useState`.
31
How to handle multiple inputs?
Use one `useState` object with dynamic keys.
32
What does `e.preventDefault()` do?
Prevents the form from reloading the page.
33
What is `useRef`?
A hook to access DOM elements or persist mutable values.
34
How do you access a DOM node?
Assign ref via `ref={myRef}` and access with `myRef.current`.
35
Can `useRef` hold a value?
Yes, it can store a mutable value that doesn't cause re-renders.
36
What is React Context?
A way to pass data through the component tree without props.
37
How do you create a context?
`const MyContext = React.createContext(defaultValue)`
38
How do you use context in a component?
Use `useContext(MyContext)`.
39
What are common use cases for context?
Themes, auth, language preferences.
40
What is a custom hook?
A reusable function that uses one or more built-in hooks.
41
How to name custom hooks?
Start with `use`, e.g., `useMyHook`.
42
Can hooks be called conditionally?
No, hooks must be called in the same order on every render.
43
What is memoization in React?
Caching a result to avoid recalculating.
44
What does `React.memo` do?
Prevents functional components from re-rendering unless props change.
45
What is `useMemo`?
Caches a value based on dependencies.
46
What is `useCallback`?
Caches a function based on dependencies.
47
What is `componentDidMount`?
Runs after component is inserted into the DOM.
48
What is `componentDidUpdate`?
Runs after component updates.
49
What is `componentWillUnmount`?
Runs before the component is removed.
50
What is the order of lifecycle methods?
`constructor` → `render` → `componentDidMount` → updates...
51
What is an error boundary?
A class component that catches JS errors in child components.
52
What methods are used in error boundaries?
`static getDerivedStateFromError`, `componentDidCatch`.
53
Can hooks catch errors?
No, but you can wrap with error boundaries.
54
What is React Router?
A library for client-side routing.
55
What is ``?
Router using HTML5 history API.
56
What does `` do?
Renders a UI based on path.
57
What does `` do?
Provides navigation without page reload.
58
How do you get route params?
Use `useParams()` from `react-router-dom`.
59
What is code splitting?
Breaking code into smaller chunks loaded on demand.
60
How to lazy load a component?
`React.lazy(() => import('./Component'))`
61
What is `Suspense` in React?
A component that shows fallback while lazy-loaded components are loading.
62
What is a fragment in React?
`<>...` – lets you group elements without extra nodes.
63
What is reconciliation?
React’s process of updating the DOM efficiently.
64
What is virtual DOM?
An in-memory representation of the real DOM.
65
What is hydration?
When React attaches event listeners to server-rendered HTML.
66
Explain React?
A JavaScript library for building user interfaces.
67
Who created React?
Facebook.
68
Explain JSX?
JavaScript XML – a syntax extension that lets you write HTML in JS.
69
Explain a component in React?
A reusable piece of UI.
70
What are the two types of components?
Functional and Class components.
71
Explain a functional component?
A function that returns JSX.
72
Describe how you define a functional component?
`function MyComponent() { return ; }`
73
Explain a hook?
A function that lets you use state or lifecycle in functional components.
74
What does `useState` do?
Adds state to functional components.
75
What does `useEffect` do?
Runs side-effects like data fetching or subscriptions.
76
What are props?
Inputs passed to components.
77
How are props passed?
As attributes on JSX elements.
78
Explain state?
Data that changes over time and triggers re-render.
79
Describe how you lift state up?
Move it to a common ancestor and pass it down via props.
80
Can props be modified?
No, props are read-only.
81
Explain the second argument of `useEffect`?
A dependency array.
82
When does `useEffect` run?
After every render unless dependencies restrict it.
83
How to run `useEffect` only once?
Pass an empty dependency array: `[]`.
84
How to clean up in `useEffect`?
Return a cleanup function inside `useEffect`.
85
Explain a common use case for `useEffect`?
Fetching data from an API.
86
Describe how you conditionally render in React?
Using `if`, ternary (`? :`), or logical AND (`&&`).
87
Explain the shorthand for conditional rendering?
`{condition &&
88
Can you use switch-case inside JSX?
Usually outside JSX, then return appropriate component.
89
Explain the benefit of keys in a list?
Helps React identify which items changed.
90
How to render a list in React?
Use `.map()` to return an array of components.
91
Reason why should keys be unique in lists?
To help React optimize re-rendering.
92
Can index be used as a key?
Only if list is static and does not change.
93
Explain a controlled component?
An input element controlled by React state.
94
Explain an uncontrolled component?
An input not managed by state; uses refs.
95
How to update form input value?
Use `onChange` handler with `useState`.
96
How to handle multiple inputs?
Use one `useState` object with dynamic keys.
97
What does `e.preventDefault()` do?
Prevents the form from reloading the page.
98
Explain `useRef`?
A hook to access DOM elements or persist mutable values.
99
Describe how you access a DOM node?
Assign ref via `ref={myRef}` and access with `myRef.current`.
100
Can `useRef` hold a value?
Yes, it can store a mutable value that doesn't cause re-renders.
101
Explain React Context?
A way to pass data through the component tree without props.
102
Describe how you create a context?
`const MyContext = React.createContext(defaultValue)`
103
Describe how you use context in a component?
Use `useContext(MyContext)`.
104
What are common use cases for context?
Themes, auth, language preferences.
105
Explain a custom hook?
A reusable function that uses one or more built-in hooks.
106
How to name custom hooks?
Start with `use`, e.g., `useMyHook`.
107
Can hooks be called conditionally?
No, hooks must be called in the same order on every render.
108
Explain memoization in React?
Caching a result to avoid recalculating.
109
What does `React.memo` do?
Prevents functional components from re-rendering unless props change.
110
Explain `useMemo`?
Caches a value based on dependencies.
111
Explain `useCallback`?
Caches a function based on dependencies.
112
Explain `componentDidMount`?
Runs after component is inserted into the DOM.
113
Explain `componentDidUpdate`?
Runs after component updates.
114
Explain `componentWillUnmount`?
Runs before the component is removed.
115
Explain the order of lifecycle methods?
`constructor` → `render` → `componentDidMount` → updates...
116
Explain an error boundary?
A class component that catches JS errors in child components.
117
What methods are used in error boundaries?
`static getDerivedStateFromError`, `componentDidCatch`.
118
Can hooks catch errors?
No, but you can wrap with error boundaries.
119
Explain React Router?
A library for client-side routing.
120
Explain ``?
Router using HTML5 history API.
121
What does `` do?
Renders a UI based on path.
122
What does `` do?
Provides navigation without page reload.
123
Describe how you get route params?
Use `useParams()` from `react-router-dom`.
124
Explain code splitting?
Breaking code into smaller chunks loaded on demand.
125
How to lazy load a component?
`React.lazy(() => import('./Component'))`
126
Explain `Suspense` in React?
A component that shows fallback while lazy-loaded components are loading.
127
Explain a fragment in React?
`<>...` – lets you group elements without extra nodes.
128
Explain reconciliation?
React’s process of updating the DOM efficiently.
129
Explain virtual DOM?
An in-memory representation of the real DOM.
130
Explain hydration?
When React attaches event listeners to server-rendered HTML.
131
Explain React?
A JavaScript library for building user interfaces.
132
Who created React?
Facebook.
133
Explain JSX?
JavaScript XML – a syntax extension that lets you write HTML in JS.
134
Explain a component in React?
A reusable piece of UI.
135
What are the two types of components?
Functional and Class components.
136
Explain a functional component?
A function that returns JSX.
137
Describe how you define a functional component?
`function MyComponent() { return ; }`
138
Explain a hook?
A function that lets you use state or lifecycle in functional components.
139
What does `useState` do?
Adds state to functional components.
140
What does `useEffect` do?
Runs side-effects like data fetching or subscriptions.
141
What are props?
Inputs passed to components.
142
How are props passed?
As attributes on JSX elements.
143
Explain state?
Data that changes over time and triggers re-render.
144
Describe how you lift state up?
Move it to a common ancestor and pass it down via props.
145
Can props be modified?
No, props are read-only.
146
Explain the second argument of `useEffect`?
A dependency array.
147
When does `useEffect` run?
After every render unless dependencies restrict it.
148
How to run `useEffect` only once?
Pass an empty dependency array: `[]`.
149
How to clean up in `useEffect`?
Return a cleanup function inside `useEffect`.
150
Explain a common use case for `useEffect`?
Fetching data from an API.
