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
+19-10
Original file line number
Diff line number
Diff line change
@@ -316,16 +316,17 @@ Hide/Show table of contents
316
316
| 253 |[How does React batch multiple state updates?](#how-does-react-batch-multiple-state-updates)|
317
317
| 254 |[Is it possible to prevent automatic batching?](#is-it-possible-to-prevent-automatic-batching)|
318
318
| 255 |[What is React hydration?](#what-is-react-hydration)|
319
-
| 256 |[How do you update objects inside state?](#how-do-you-update-objects-inside-state)|
320
-
| 257 |[How do you update nested objects inside state?](#how-do-you-update-nested-objects-inside-state)|
321
-
| 258 |[How do you update arrays inside state?](#how-do-you-update-arrays-inside-state)|
322
-
| 259 |[How do you use the Immer library for state updates?](#how-do-you-use-immer-library-for-state-updates)|
323
-
| 260 |[What are the benefits of preventing direct state mutations?](#what-are-the-benefits-of-preventing-the-direct-state-mutations)|
324
-
| 261 |[What are the preferred and non-preferred array operations for updating state?](#what-are-the-preferred-and-non-preferred-array-operations-for-updating-the-state)|
325
-
| 262 |[What happens when you define nested function components?](#what-will-happen-by-defining-nested-function-components)|
326
-
| 263 |[Can you use keys for non-list items?](#can-i-use-keys-for-non-list-items)|
327
-
| 264 |[What guidelines should be followed for writing reducers?](#what-are-the-guidelines-to-be-followed-for-writing-reducers)|
328
-
| 265 |[What is the useReducer Hook, and can you describe its usage?](#what-is-use-reducer-hook-can-you-describe-its-usage)|
319
+
| 256 |[How do you update objects inside the state?](#how-do-you-update-objects-inside-state)|
320
+
| 257 |[How do you update nested objects inside the state?](#How-do-you-update-nested-objects-inside-state)|
321
+
| 258 |[How do you update arrays inside the state?](#how-do-you-update-arrays-inside-state)|
322
+
| 259 |[How do you use immer library for state updates?](#how-do-you-use-immer-library-for-state-updates)|
323
+
| 260 |[What are the benefits of preventing the direct state mutations?](#what-are-the-benefits-of-preventing-the-direct-state-mutations)|
324
+
| 261 |[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)|
325
+
| 262 |[What will happen by defining nested function components?](#what-will-happen-by-defining-nested-function-components)|
326
+
| 263 |[Can I use keys for non-list items?](#can-i-use-keys-for-non-list-items)|
327
+
| 264 |[What are the guidelines to be followed for writing reducers?](#what-are-the-guidelines-to-be-followed-for-writing-reducers)|
328
+
||**Hooks**|
329
+
| 265 |[What is useReducer hook? Can you describe its usage?](#what-is-use-reducer-hook-Can-you-describe-its-usage)|
329
330
| 266 |[How do you compare useState and useReducer?](#how-do-you-compare-use-state-and-use-reducer)|
330
331
| 267 |[How does Context work with the useContext Hook?](#how-does-context-works-using-usecontext-hook)|
331
332
| 268 |[What are the use cases of the useContext Hook?](#what-are-the-use-cases-of-usecontext-hook)|
@@ -4019,6 +4020,14 @@ class ParentComponent extends React.Component {
4019
4020
}
4020
4021
```
4021
4022
4023
+
This plugin also provide another important rule through `react-hooks/exhaustive-deps`. It ensures that the dependencies of useEffect, useCallback, and useMemo hooks are correctly listed to avoid potential bugs.
4024
+
4025
+
```jsx
4026
+
useEffect(() => {
4027
+
// Forgetting `message` will result in incorrect behavior
4028
+
console.log(message);
4029
+
}, []); // Here `message` should be a dependency
4030
+
```
4022
4031
The recommended `eslint-config-react-app` preset already includes the hooks rules of this plugin.
4023
4032
For example, the linter enforce proper naming convention for hooks. If you rename your custom hooks which as prefix "use" to something else then linter won't allow you to call built-in hooks such as useState, useEffect etc inside of your custom hook anymore.
0 commit comments