You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+60Lines changed: 60 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -6169,6 +6169,66 @@ Technically it is possible to write nested function components but it is not sug
6169
6169
6170
6170
**[⬆ Back to Top](#table-of-contents)**
6171
6171
6172
+
272. ### Can Hooks be used in class components?
6173
+
No, Hooks cannot be used inside class components. They are specially designed for function components. This is because hooks depend on the sequence in which they are called during a component’s render, something that's only guaranteed in functional components. However, both class and function components can coexist in the same application.
6174
+
**[⬆ Back to Top](#table-of-contents)**
6175
+
273. ### What is an updater function? Should an updater function be used in all cases?
6176
+
An **updater function** is a form of `setState` where you pass a **function** instead of a direct value. This function receives the **previous state** as an argument and returns the **next state**.
6177
+
6178
+
The updater function expression looks like below,
6179
+
```js
6180
+
setCount(prevCount=> prevCount +1); // Safe and predictable
6181
+
```
6182
+
Here, `prevCount=> prevCount +1` is the updater function.
6183
+
6184
+
In the React community, there's often a recommendation to use updater functions when updating state that depends on its previous value. This helps prevent unexpected behaviors that can arise from working with outdated or "stale" state.
6185
+
6186
+
While using an updater function is a good habit, it's not always necessary. In most cases, React batches updates and ensures that the state is up-to-date at the beginning of the event handler, so you typically don’t run into stale state issues during a single synchronous event.
6187
+
However, if you’re doing multiple updates to the same state variable within a single handler, using the updater form ensures that each update correctly uses the latest state value, rather than a potentially outdated one.
6188
+
6189
+
**Example: Multiple Updates in One Handler**
6190
+
```js
6191
+
functionhandleCount() {
6192
+
setCounter(a=> a +1);
6193
+
setCounter(a=> a +1);
6194
+
setCounter(a=> a +1);
6195
+
}
6196
+
```
6197
+
6198
+
In this example, `a=> a +1` is an **updater function**. React queues these updater functions and applies them sequentially, each using the most recent state value. As a result, the counter will correctly increment by 3.
6199
+
6200
+
In many cases, such as setting state based on user input or assigning static values, you don’t need the updater function:
6201
+
```js
6202
+
setName('Sudheer');
6203
+
```
6204
+
6205
+
**[⬆ Back to Top](#table-of-contents)**
6206
+
6207
+
274. Can useState take a function as an initial value?
6208
+
Yes, `useState` can take a function as an initial value, and this is a useful feature in React called **lazy initialization**. This function is also known as **initializer function**.
6209
+
6210
+
When you call useState(initialValue), you normally pass in a value directly:
6211
+
6212
+
```js
6213
+
const [count, setCount] =useState(0); // initial value is 0
6214
+
```
6215
+
6216
+
But if calculating that initial value is expensive or involves logic, you can pass a function that returns the value:
6217
+
```js
6218
+
const [count, setCount] =useState(() => {
6219
+
// This function only runs once — when the component first renders
6220
+
returnexpensiveComputation();
6221
+
});
6222
+
```
6223
+
6224
+
This function avoids doing heavy computation on every render. If you don't use this function form and invokes it directly, the function will run everytime the component renders and impact the performance.
0 commit comments