Skip to content

Commit 51ddbbb

Browse files
sudheerjsudheerj
committed
Add state update questions
1 parent b48a8c9 commit 51ddbbb

1 file changed

Lines changed: 134 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 134 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ Hide/Show table of contents
8484
| 42 | [What is reconciliation?](#what-is-reconciliation) |
8585
| 43 | [How to set state with a dynamic key name?](#how-to-set-state-with-a-dynamic-key-name) |
8686
| 44 | [What would be the common mistake of function being called every time the component renders?](#what-would-be-the-common-mistake-of-function-being-called-every-time-the-component-renders) |
87-
| 45 | [Is lazy function supports named exports?](#is-lazy-function-supports-named-exports) |
87+
| 45 | [Does the lazy function support named exports?](#does-the-lazy-function-support-named-exports) |
8888
| 46 | [Why React uses className over class attribute?](#why-react-uses-classname-over-class-attribute) |
8989
| 47 | [What are fragments?](#what-are-fragments) |
9090
| 48 | [Why fragments are better than container divs?](#why-fragments-are-better-than-container-divs) |
@@ -390,6 +390,10 @@ Hide/Show table of contents
390390
| 342 | [What are capture phase events?](#what-are-capture-phase-events) |
391391
| 343 | [How does React updates screen in an application?](#how-does-react-updates-screen-in-an-application) |
392392
| 346 | [What is React hydration?](#what-is-react-hydration) |
393+
| 347 | [What is React hydration?](#what-is-react-hydration) |
394+
| 348 | [What is React hydration?](#what-is-react-hydration) |
395+
| 349 | [What is React hydration?](#what-is-react-hydration) |
396+
| 350 | [What are the preferred and non-preferred array operations for updating the state?](#what-are-the-preferred-and-non-preferred-array-operations-for-updating-the-state) |
393397

394398
</details>
395399

@@ -1528,7 +1532,7 @@ Hide/Show table of contents
15281532
15291533
**[⬆ Back to Top](#table-of-contents)**
15301534
1531-
44. ### Is lazy function supports named exports?
1535+
44. ### Does the lazy function support named exports?
15321536
15331537
No, currently `React.lazy` function supports default exports only. If you would like to import modules which are named exports, you can create an intermediate module that reexports it as the default. It also ensures that tree shaking keeps working and don’t pull unused components.
15341538
Let's take a component file which exports multiple named components,
@@ -7600,6 +7604,134 @@ const loadUser = async () => {
76007604
76017605
**[⬆ Back to Top](#table-of-contents)**
76027606
7607+
347. ### How do you update objects inside state?
7608+
You cannot update the objects which exists in the state directly. Instead, you should create a fresh new object (or copy from the existing object) and update the latest state using the newly created object. Eventhough JavaScript objects are mutable, you need to treate objects inside state as read-only while updating the state.
7609+
7610+
Let's see this comparison with an example. The issue with regular object mutation approach can be described by updating the user details fields of `Profile` component. The properties of `Profile` component such as firstName, lastName and age details mutated in an event handler as shown below.
7611+
7612+
```jsx
7613+
import { useState } from 'react';
7614+
7615+
export default function Profile() {
7616+
const [user, setUser] = useState({
7617+
firstName: 'John',
7618+
lastName: 'Abraham',
7619+
age: 30
7620+
});
7621+
7622+
function handleFirstNameChange(e) {
7623+
user.firstName = e.target.value;
7624+
}
7625+
7626+
function handleLastNameChange(e) {
7627+
user.lastName = e.target.value;
7628+
}
7629+
7630+
function handleAgeChange(e) {
7631+
user.age = e.target.value;
7632+
}
7633+
7634+
return (
7635+
<>
7636+
<label>
7637+
First name:
7638+
<input
7639+
value={user.firstName}
7640+
onChange={handleFirstNameChange}
7641+
/>
7642+
</label>
7643+
<label>
7644+
Last name:
7645+
<input
7646+
value={user.lastName}
7647+
onChange={handleLastNameChange}
7648+
/>
7649+
</label>
7650+
<label>
7651+
Age:
7652+
<input
7653+
value={user.age}
7654+
onChange={handleAgeChange}
7655+
/>
7656+
</label>
7657+
<p>
7658+
Profile:
7659+
{person.firstName}{' '}
7660+
{person.lastName}{' '}
7661+
({person.age})
7662+
</p>
7663+
</>
7664+
);
7665+
}
7666+
```
7667+
Once you run the application with above user profile component, you can observe that user profile details won't be update upon entering the input fields.
7668+
This issue can be fixed by creating a new copy of object which includes existing properties through spread syntax(...obj) and add changed values in a single event handler itself as shown below.
7669+
7670+
```jsx
7671+
handleProfileChange(e) {
7672+
setUser({
7673+
...user,
7674+
[e.target.name]: e.target.value
7675+
});
7676+
}
7677+
```
7678+
7679+
The above event handler is concise instead of maintaining separate event handler for each field. Now, UI displays the updated field values as expected without an issue.
7680+
7681+
**[⬆ Back to Top](#table-of-contents)**
7682+
7683+
348. ### How do you update nested objects inside state?
7684+
You cannot simply use spread syntax for all kinds of objects inside state. Because spread syntax is shallow and it copies properties for one level deep only. If the object has nested object structure, UI doesn't work as expected with regular JavaScript nested property mutation. Let's demonstrate this behavior with an example of User object which has address nested object inside of it.
7685+
7686+
```jsx
7687+
const user = {
7688+
name: 'John',
7689+
age: 32,
7690+
address: {
7691+
country: 'Singapore',
7692+
postalCode: 440004
7693+
}
7694+
}
7695+
```
7696+
7697+
If you try to update the country nested field in a regular javascript fashion(as shown below) then user profile screen won't be updated with latest value.
7698+
7699+
```js
7700+
user.address.country = "Germany";
7701+
```
7702+
This issue can be fixed by flattening all the fields into a top-level object or create a new object for each nested object and point it to it's parent object. In this example, first you need to create copy of address object and update it with the latest value. Later, the adress object should be linked to parent user object something like below.
7703+
7704+
```js
7705+
setUser({
7706+
...user,
7707+
address: {
7708+
...user.address,
7709+
country: 'Germany'
7710+
}
7711+
});
7712+
```
7713+
This approach is bit verbose but this workaround can be used for some levels of nested objects without any hassle.
7714+
7715+
**[⬆ Back to Top](#table-of-contents)**
7716+
7717+
349. ### How do you update arrays inside state?
7718+
**[⬆ Back to Top](#table-of-contents)**
7719+
7720+
350. ### What are the preferred and non-preferred array operations for updating the state?
7721+
7722+
The below table represent preferred and non-preferred array operations for updating the component state.
7723+
7724+
| Action | Preferred | Non-preferred |
7725+
| ---------- | ------------------- | ----------------------- |
7726+
| Adding | concat, [...arr] | push, unshift |
7727+
| Removing | filter, slice | pop, shift, splice |
7728+
| Replacing | map | splice, arr[i] = someValue |
7729+
| sorting | copying to new array | reverse, sort |
7730+
7731+
If you use Immer library then you can able to use all array methods without any problem.
7732+
7733+
**[⬆ Back to Top](#table-of-contents)**
7734+
76037735
## Disclaimer
76047736
76057737
The questions provided in this repository are the summary of frequently asked questions across numerous companies. We cannot guarantee that these questions will actually be asked during your interview process, nor should you focus on memorizing all of them. The primary purpose is for you to get a sense of what some companies might ask — do not get discouraged if you don't know the answer to all of them ⁠— that is ok!

0 commit comments

Comments
 (0)