10 examples of 'react hook useeffect has a missing dependency' in JavaScript

9
export function useEffectAfterMount(cb, dependencies) {
10
  const justMounted = useRef(true);
11
  useEffect(() => {
12
    if (!justMounted.current) {
13
      return cb();
14
    }
15
    justMounted.current = false;
16
    // eslint-disable-next-line react-hooks/exhaustive-deps
17
  }, dependencies);
18
}

19
export function useSingleEffect(effectId: string, effect: EffectCallback, deps?: DependencyList) {
20
  useEffect(() => {
21
    if (!singleEffectMemo[effectId]) {
22
      singleEffectMemo[effectId] = true
23
      const cleanUp = effect()
24
      return () => {
25
        singleEffectMemo[effectId] = false
26
        if (typeof cleanUp === 'function') cleanUp()
27
      }
28
    }
29
  }, deps)
30
}

196
export function useEffect (effect, deps) {
197
  useEffectImpl(effect, deps, true)
198
}

51
function Effect() {
52
  const { gl, scene, camera, size } = useThree()
53
54
  const [bloom, final] = useMemo(() => {
55
    const renderScene = new RenderPass(scene, camera)
56
57
    const comp = new EffectComposer(gl)
58
    comp.renderToScreen = false
59
    comp.addPass(renderScene)
60
    comp.addPass(new UnrealBloomPass(new THREE.Vector2(size.width, size.height), 1.25, 1, 0))
61
62
    const finalComposer = new EffectComposer(gl)
63
    finalComposer.addPass(renderScene)
64
    const finalPass = new ShaderPass(
65
      new THREE.ShaderMaterial({
66
        uniforms: { baseTexture: { value: null }, bloomTexture: { value: comp.renderTarget2.texture } },
67
        vertexShader:
68
          'varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }',
69
        fragmentShader:
70
          'uniform sampler2D baseTexture; uniform sampler2D bloomTexture; varying vec2 vUv; vec4 getTexture( sampler2D texelToLinearTexture ) { return mapTexelToLinear( texture2D( texelToLinearTexture , vUv ) ); } void main() { gl_FragColor = ( getTexture( baseTexture ) + vec4( 1.0 ) * getTexture( bloomTexture ) ); }',
71
      }),
72
      'baseTexture'
73
    )
74
    finalPass.needsSwap = true
75
    finalComposer.addPass(finalPass)
76
77
    const fxaa = new ShaderPass(FXAAShader)
78
    fxaa.material.uniforms['resolution'].value.x = 1 / size.width
79
    fxaa.material.uniforms['resolution'].value.y = 1 / size.height
80
    finalComposer.addPass(fxaa)
81
82
    return [comp, finalComposer]
83
  }, [])
84
85
  useEffect(() => {
86
    bloom.setSize(size.width, size.height)
87
    final.setSize(size.width, size.height)
88
  }, [bloom, final, size])
89
90
  useFrame(() => {
91
    // https://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_unreal_bloom_selective.html
92
    // this seems kinda dirty, it mutates the scene and overwrites materials
93
    scene.traverse(darkenNonBloomed)
94
    bloom.render()
95
    scene.traverse(restoreMaterial)
96
    // then writes the normal scene on top
97
    final.render()
98
  }, 1)
99
  return null
100
}

38
React.useEffect = function tryCatchUseEffect(cb, deps) {
39
  return originalUseEffect(() => {
40
    // stop the infinite loop if we've warned. The test is over now, but
41
    // before we restore the useEffect back to where it should go, we need
42
    // to prevent the infinite loop otherwise React will figure out what
43
    // we're doing and be mad :-(
44
    if (console.warn.mock.calls.length) {
45
      return
46
    }
47
    try {
48
      return cb()
49
    } catch (e) {
50
      if (e.message && e.message.includes('stop-runaway-react-effects')) {
51
        // try/catch prevents test from failing. We assert on the warning
52
      } else {
53
        // something else is up
54
        throw e
55
      }
56
    }
57
  }, deps)
58
}

6
export default function useOnLoad(effect, emitter, watch = []) {
7
  return React.useEffect(() => {
8
    if (!emitter) return
9
10
    function onLoad() {
11
      effect(emitter, ...watch)
12
    }
13
14
    emitter.on('load', onLoad)
15
    return () => {
16
      emitter.off('load', onLoad)
17
    }
18
  }, [emitter, ...watch])
19
}

6
export function useAuto(effect: React.EffectCallback, deps?: readonly any[]) {
7
  const auto = useConstant(() => new Auto())
8
  useDispose(() => auto.dispose())
9
  useEffect(() => auto.run(effect), deps)
10
  return auto
11
}

32
export function useUnmount(component: Component, hook: (token: UnmountToken) => void): void {
33
  /* istanbul ignore else */
34
  if (process.env.IVI_TARGET !== "ssr") {
35
    const hooks = component.s;
36
    hooks.u = addHook(hooks.u, hook);
37
  }
38
}

217
function useHook(name: string, callback: (hook: Hook) => void, deps?: any[] | undefined): Hook {
218
  const hooks = getHooksContextOrThrow();
219
  if (hooks.currentPhase === 'MOUNT') {
220
    if (deps != null && !Array.isArray(deps)) {
221
      logger.warn(
222
        `${name} received a final argument that is not an array (instead, received ${deps}). When specified, the final argument must be an array.`
223
      );
224
    }
225
    const hook: Hook = { name, deps };
226
    hooks.currentHooks.push(hook);
227
    callback(hook);
228
    return hook;
229
  }
230
231
  if (hooks.currentPhase === 'UPDATE') {
232
    const hook = hooks.getNextHook();
233
    if (hook == null) {
234
      throw new Error('Rendered more hooks than during the previous render.');
235
    }
236
237
    if (hook.name !== name) {
238
      logger.warn(
239
        `Storybook has detected a change in the order of Hooks${
240
          hooks.currentDecoratorName ? ` called by ${hooks.currentDecoratorName}` : ''
241
        }. This will lead to bugs and errors if not fixed.`
242
      );
243
    }
244
245
    if (deps != null && hook.deps == null) {
246
      logger.warn(
247
        `${name} received a final argument during this render, but not during the previous render. Even though the final argument is optional, its type cannot change between renders.`
248
      );
249
    }
250
251
    if (deps != null && hook.deps != null && deps.length !== hook.deps.length) {
252
      logger.warn(`The final argument passed to ${name} changed size between renders. The order and size of this array must remain constant.
253
Previous: ${hook.deps}
254
Incoming: ${deps}`);
255
    }
256
257
    if (deps == null || hook.deps == null || !areDepsEqual(deps, hook.deps)) {
258
      callback(hook);
259
      hook.deps = deps;
260
    }
261
    return hook;
262
  }
263
264
  throw invalidHooksError();
265
}

3
function Hooks(props) {
4
    // Declare a new state variable, which we'll call "count"
5
    // console.log(props);
6
    const [count, setCount] = useState(0)
7
    const [width, setWithd] = useState(window.innerWidth);
8
    // Similar to componentDidMount and componentDidUpdate:
9
    useEffect(() => {
10
        // Update the document title using the browser API
11
        document.title = `You clicked ${count} times`;
12
        const handleResize = ()=>{
13
            setWithd(window.innerWidth);
14
        }
15
        window.addEventListener('resize', handleResize);
16
17
        // return () => (document.title = "前端精读");
18
19
    },[width]);
20
21
    return (
22
          <div>
23
            
24
              <div>
25
                    <p> 窗口宽度{ width }px</p>
26
                    <p>You clicked {count} times</p>
27
                     setCount(count + 1)}&gt;
28
                      Click me
29
                    
30
              </div>
31
            
32
          </div>
33
    );
34
}