10 examples of 'useeffect async' in JavaScript

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

229
function useAsync (fn, inputs) {
230
  useLayoutEffect(() => {
231
    fn()
232
  }, inputs)
233
}

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
}

39
export function useAsyncEffect (asyncFn, inputs) {
40
  const [state, setPromise] = useAsync()
41
  useEffect(() => {
42
    let abort = setPromise(asyncFn)
43
    return abort
44
  }, inputs)
45
  return state
46
}

68
function handleEffect(effect) {
69
  let called = false;
70
  let returned = false;
71
  let value = null;
72
  let thrown = false;
73
74
  runEffect(handlers, effect, (error, result) => {
75
    if (called) {
76
      return reject(new OneShotViolationError(effect));
77
    }
78
79
    called = true;
80
    if (error != null) {
81
      if (result != null) {
82
        return reject(
83
          new ContinuedWithErrorAndSuccess(error, result, effect)
84
        );
85
      }
86
      thrown = true;
87
      throwAndContinue(error);
88
    } else {
89
      if (returned) {
90
        next(result);
91
      } else {
92
        value = result;
93
      }
94
    }
95
  });
96
97
  returned = true;
98
  if (thrown) {
99
    return { continue: false, value: null };
100
  } else {
101
    return { continue: called, value };
102
  }
103
}

72
runSyncWithEffect (onEffect : (effect : this[ 'YieldT' ]) => any, ...args : this[ 'ArgsT' ]) : this[ 'ValueT' ] {
73
    this.startCalculation(...args)
74
75
    while (!this.isCalculationCompleted()) {
76
        this.supplyYieldValue(onEffect(this.iterationResult.value))
77
    }
78
79
    return this.value
80
}

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
}

332
function Effect(originator, options) {
333
    this.affectsFriendly = options.affectsFriendly || false
334
    this.affectsEnemy = options.affectsEnemy || false
335
    this.isInstant = options.isInstant || false
336
    this.isSticky = options.isSticky || false
337
    this.isTargetArea = options.isTargetArea || false
338
    this.isSourceArea = options.isSourceArea || false
339
    this.stickyTtl = options.stickyTtl || 0
340
    this.stickyTtlRandom = options.stickyTtlRandom || 0
341
    this.targetRadius = options.targetRadius || 0
342
    this.sourceRadius = options.sourceRadius || 0
343
    this.originator = originator
344
    
345
    this.sourceFn = options.sourceFn || undefined
346
    this.targetFn = options.targetFn || undefined
347
    this.stickyFn = options.stickyFn || undefined
348
    
349
    this.additional = options.additional || {}
350
}

82
effect(value) {
83
  this.lightState.effect(value);
84
  return this;
85
}

286
set effect(effect) {
287
  this.state.set('effect', String(effect));
288
}