docs: update docs

Author: MuYunyun

src/tasks/hooks/index.js

@@ -0,0 +1,4 @@
+import useInterval from "./useInterval"
+import useForceUpdate from "./useForceUpdate"
+
+export { useInterval, useForceUpdate }

src/tasks/hooks/useForceUpdate.js

@@ -0,0 +1,9 @@
+import React from "react"
+
+const { useReducer } = React
+
+function useForceUpdate() {
+  return useReducer((n) => n + 1, 0)[1]
+}
+
+export default useForceUpdate

src/useInterval.js renamed to src/tasks/hooks/useInterval.js

@@ -1,4 +1,6 @@
-import React, { useState, useRef, useEffect } from "react"
+import React from "react"
+
+const { useRef, useEffect } = React
 
 export default function useInterval(callback, delay) {
   const cbRef = useRef({})
@@ -12,4 +14,4 @@ export default function useInterval(callback, delay) {
 
     return () => clearInterval(id)
   }, [delay])
-}
+}

src/tasks/task3_if_rule.js

@@ -1,11 +1,13 @@
 /* eslint-disable no-unused-vars */
 import React from "react"
+import { useForceUpdate } from "./hooks"
 
 const { useState, useEffect, useReducer } = React
 
-// common case
+// Only Call Hooks at the Top Level.
+// Don’t call Hooks from regular JavaScript functions.
 function RuleCase() {
-  const [value, forceUpdate] = useReducer((n) => n + 1, 0)
+  const forceUpdate = useForceUpdate()
   const [a, setA] = useState(1)
   if (Math.floor(Math.random() * 100) > 50) {
     useEffect(() => {