TypeScript react.useEffect函數代碼示例

export const useQuery = (value: string): Output => {
  const [result, setResult] = useState<Result>([]);
  const [loading, setLoading] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const debounce = useRef<any>(null);

  useEffect(() => {
    worker.load().then(() => {
      setLoaded(true);
    });
  }, []);

  useEffect(
    () => {
      if (!value) return;

      if (debounce.current) {
        clearTimeout(debounce.current);
      }

      setLoading(true);

      debounce.current = setTimeout(() => {
        worker.solve(value).then((data: any) => {
          setResult(data);
          setLoading(false);
        });
      }, 140);
    },
    [value],
  );

  return { loaded, loading, data: result };
};

export function useDragLayer<CollectedProps>(
	collect: (monitor: DragLayerMonitor) => CollectedProps,
): CollectedProps {
	const dragDropManager = useDragDropManager()
	const monitor = dragDropManager.getMonitor()
	const [collected, updateCollected] = useCollector(monitor, collect)

	useEffect(() => monitor.subscribeToOffsetChange(updateCollected))
	useEffect(() => monitor.subscribeToStateChange(updateCollected))
	return collected
}

export function useStorage<T>(key: string, defaultValue: T) {
  const storage = useContext(StorageContext)
  const [value, set] = useState(() => load(storage, key, defaultValue))

  useEffect(() => {
    store(storage, key, value)
  }, [value])

  useEffect(() => {
    set(load(storage, key, defaultValue))
  }, [key, storage])

  return [value, set] as const
}

export function useIntersectionObserver(
  target: React.RefObject<HTMLElement>,
  root: React.RefObject<HTMLElement>,
  options: IntersectionObserverInit
) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting !== isIntersecting) {
          setIntersecting(entry.isIntersecting);
        }
      },
      {
        root: root.current,
        // rootMargin: '0px 0px 0px 0px',
        // threshold: 0,
        ...options,
      }
    );
    if (target.current) {
      observer.observe(target.current);
    }
    return () => {
      if (target.current) {
        observer.unobserve(target.current);
      }
    };
  }, []);

  return isIntersecting;
}

export default function useField(name: string) {
  const {
    initialData,
    errors,
    scopePath,
    unregisterField,
    registerField
  } = useContext(FormContext);

  const fieldName = scopePath ? `${scopePath}.${name}` : name;

  useEffect(() => {
    return () => unregisterField(fieldName);
  }, []);

  const defaultValue = dot.pick(fieldName, initialData);
  const error = errors[fieldName];

  return {
    fieldName,
    registerField,
    defaultValue,
    error
  };
}

export function usePageVisibility() {
  const [visible, setVisible] = useState(getVisibility());

  useEffect(() => {
    const handler = () => setVisible(getVisibility());
    let visibilityChange: string;

    if (typeof document.hidden !== 'undefined') {
      // Opera 12.10 and Firefox 18 and later support
      visibilityChange = 'visibilitychange';
    } else if (
      //@ts-ignore
      typeof document.msHidden !== 'undefined'
    ) {
      visibilityChange = 'msvisibilitychange';
    } else if (
      //@ts-ignore
      typeof document.webkitHidden !== 'undefined'
    ) {
      visibilityChange = 'webkitvisibilitychange';
    } else {
      return;
    }

    document.addEventListener(visibilityChange, handler);
    return () => document.removeEventListener(visibilityChange, handler);
  }, []);

  return visible;
}

export function useCanvas(
    width: number,
    height: number,
    sourceCanvasRef?: RefObject<HTMLCanvasElement>
): [
    HTMLCanvasElement | null,
    CanvasRenderingContext2D | null,
    (ctx: CanvasRenderingContext2D) => void
] {
    const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
    const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);

    useEffect(() => {
        const canvas = sourceCanvasRef
            ? sourceCanvasRef.current!
            : document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d')!;
        setCanvas(canvas);
        setCtx(ctx);
    }, []);

    return [canvas, ctx, setCtx];
}

export function useApiFetcher<T>(
  fetcher: () => Promise<T>,
  inputs: InputIdentityList,
): T | null {
  const [result, setResult] = useState<T | null>(null)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      try {
        const result = await fetcher()
        if (!cancelled) setResult(result)
      } catch (e) {
        if (cancelled) return

        if (e instanceof NotAuthedError) {
          authService.setLoginRedirectUrl(history.location.pathname)
          history.push('/login')
        } else {
          throw e
        }
      }
    })()

    return () => {
      cancelled = true
    }
  }, inputs)

  return result
}

// Make latest fixture state accessible in ref callback
function useFixtureStateRef(fixtureState: FixtureState) {
  const ref = React.useRef(fixtureState);
  React.useEffect(() => {
    ref.current = fixtureState;
  });
  return ref;
}

export function useRedirect(history: History, redirectLocation?: Location) {
  useEffect(() => {
    if (redirectLocation) {
      history.replace(redirectLocation);
    }
  });
}