Skip to content

Commit a4f162c

Browse files
committed
Add useState questions
1 parent e2be989 commit a4f162c

File tree

1 file changed

+60
-0
lines changed

1 file changed

+60
-0
lines changed

README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6169,6 +6169,66 @@ Technically it is possible to write nested function components but it is not sug
61696169
61706170
**[⬆ Back to Top](#table-of-contents)**
61716171
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+
function handleCount() {
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+
return expensiveComputation();
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.
6225+
For example, the below usage is not recommended.
6226+
```js
6227+
const [count, setCount] = useState(expensiveComputation());
6228+
```
6229+
6230+
**[⬆ Back to Top](#table-of-contents)**
6231+
275.
61726232
## Old Q&A
61736233
61746234
1. ### Why should we not update the state directly?

0 commit comments

Comments
 (0)