TypeScript react.useMemo函數代碼示例

export const useUrlState = <State>({
  defaultState,
  decodeUrlState,
  encodeUrlState,
  urlStateKey,
}: {
  defaultState: State;
  decodeUrlState: (value: RisonValue | undefined) => State | undefined;
  encodeUrlState: (value: State) => RisonValue | undefined;
  urlStateKey: string;
}) => {
  const history = useHistory();

  const urlStateString = useMemo(
    () => {
      if (!history) {
        return;
      }

      return getParamFromQueryString(getQueryStringFromLocation(history.location), urlStateKey);
    },
    [history && history.location, urlStateKey]
  );

  const decodedState = useMemo(() => decodeUrlState(decodeRisonUrlState(urlStateString)), [
    decodeUrlState,
    urlStateString,
  ]);

  const state = useMemo(() => (typeof decodedState !== 'undefined' ? decodedState : defaultState), [
    defaultState,
    decodedState,
  ]);

  const setState = useCallback(
    (newState: State | undefined) => {
      if (!history) {
        return;
      }

      const location = history.location;

      const newLocation = replaceQueryStringInLocation(
        location,
        replaceStateKeyInQueryString(
          urlStateKey,
          typeof newState !== 'undefined' ? encodeUrlState(newState) : undefined
        )(getQueryStringFromLocation(location))
      );

      if (newLocation !== location) {
        history.replace(newLocation);
      }
    },
    [encodeUrlState, history, history && history.location, urlStateKey]
  );

  return [state, setState] as [typeof state, typeof setState];
};

export function useDropTargetMonitor(): [DropTargetMonitor, TargetConnector] {
	const manager = useDragDropManager()
	const monitor = useMemo(() => new DropTargetMonitorImpl(manager), [manager])
	const connector = useMemo(() => new TargetConnector(manager.getBackend()), [
		manager,
	])
	return [monitor, connector]
}

export const useKibanaUiSetting = (key: string, defaultValue?: any) => {
  const uiSettingsClient = useMemo(() => getNewPlatform().setup.core.uiSettings, [getNewPlatform]);

  const uiSetting$ = useMemo(() => uiSettingsClient.get$(key, defaultValue), [uiSettingsClient]);
  const uiSetting = useObservable(uiSetting$);

  const setUiSetting = useCallback((value: any) => uiSettingsClient.set(key, value), [
    uiSettingsClient,
  ]);

  return [uiSetting, setUiSetting];
};

export function useTransactionOverviewCharts(urlParams: IUrlParams) {
  const { serviceName, start, end, transactionType } = urlParams;
  const uiFilters = useUiFilters(urlParams);

  const { data, error, status } = useFetcher(
    () => {
      if (serviceName && start && end) {
        return loadTransactionCharts({
          serviceName,
          start,
          end,
          transactionType,
          uiFilters
        });
      }
    },
    [serviceName, start, end, transactionType, uiFilters]
  );

  const memoizedData = useMemo(() => getTransactionCharts(urlParams, data), [
    data
  ]);

  return {
    data: memoizedData,
    status,
    error
  };
}

export function useTransactionList(urlParams: IUrlParams) {
  const { serviceName, transactionType, start, end } = urlParams;
  const uiFilters = useUiFilters(urlParams);
  const { data = [], error, status } = useFetcher(
    () => {
      if (serviceName && start && end && transactionType) {
        return loadTransactionList({
          serviceName,
          start,
          end,
          transactionType,
          uiFilters
        });
      }
    },
    [serviceName, start, end, transactionType, uiFilters]
  );

  const memoizedData = useMemo(() => getWithRelativeImpact(data), [data]);
  return {
    data: memoizedData,
    status,
    error
  };
}

export function useTransactionDetailsCharts(urlParams: IUrlParams) {
  const {
    serviceName,
    transactionType,
    start,
    end,
    transactionName,
    kuery
  } = urlParams;

  const { data, error, status } = useFetcher(
    () =>
      loadTransactionDetailsCharts({
        serviceName,
        transactionName,
        transactionType,
        start,
        end,
        kuery
      }),
    [serviceName, transactionName, transactionType, start, end, kuery]
  );

  const memoizedData = useMemo(() => getTransactionCharts(urlParams, data), [
    data
  ]);

  return {
    data: memoizedData,
    status,
    error
  };
}

export function useDrop<
	DragObject extends DragObjectWithType,
	DropResult,
	CollectedProps
>(
	spec: DropTargetHookSpec<DragObject, DropResult, CollectedProps>,
): [CollectedProps, ConnectDropTarget] {
	const specRef = useRef(spec)
	invariant(spec.accept != null, 'accept must be defined')

	const [monitor, connector] = useDropTargetMonitor()
	useDropHandler(specRef, monitor, connector)

	const result: CollectedProps = useMonitorOutput(
		monitor,
		specRef.current.collect || (() => ({} as CollectedProps)),
		() => connector.reconnect(),
	)

	const connectDropTarget = useMemo(() => connector.hooks.dropTarget(), [
		connector,
	])

	useEffect(() => {
		connector.dropTargetOptions = spec.options || null
		connector.reconnect()
	}, [spec.options])
	return [result, connectDropTarget]
}

export const useSubscription = <T, TVariables = OperationVariables>(
  query: DocumentNode,
  options: SubscriptionOptions<T, TVariables> = {},
): {
  data: T | { [key: string]: void }
  error?: GraphQLError
  loading: boolean
} => {
  const onSubscriptionData = options.onSubscriptionData
  const prevOptions = useRef<typeof options | null>(null)
  const client = useApolloClient()
  const [data, setData] = useState<T | {}>({})
  const [error, setError] = useState<GraphQLError | null>(null)
  const [loading, setLoading] = useState<boolean>(true)

  const subscriptionOptions = {
    query,
    variables: options.variables,
    fetchPolicy: options.fetchPolicy,
  }

  useEffect(
    () => {
      prevOptions.current = subscriptionOptions
      const subscription = client
        .subscribe<{ data: T }, TVariables>(subscriptionOptions)
        .subscribe({
          next: ({ data }) => {
            setData(data)

            if (onSubscriptionData) {
              onSubscriptionData({ client, subscriptionData: data })
            }
          },
          error: err => {
            setError(err)
            setLoading(false)
          },
          complete: () => {
            setLoading(false)
          },
        })

      return () => {
        subscription.unsubscribe()
      }
    },
    [isEqual(prevOptions.current, subscriptionOptions) ? prevOptions.current : subscriptionOptions],
  )

  return useMemo(
    () => ({
      data,
      error,
      loading,
    }),
    [data, error, loading],
  )
}

/**
 * Hook that allows you to define dynamic (or static) css for use in a component.
 *
 * @param styles The CSS properties to compile
 * @param deps list of dependencies (like in useMemo). *Unlike* useMemo and useEffect,
 * this defaults to [], meaning your styles won't be recalculated at each render
 * (since this is the most common case)
 * @returns a function to compile the style that takes in an optional `prop` parameter
 * (default `className`).
 * 
 * Examples:
 *
 * ```
 // Normal usage
 function Component1() {
   const css = useStyle({ margin: '1rem' })
   return <div {...css()}>My Component</div>
 }
 
 // Pass in props
 function Component2({ type }) {
   const css = useStyle({
     color: type === 'primary' ? 'blue' : 'white'
   }, [type])
   return <button {...css()}>Click Me</button>
 }
 
 // Choose prop name
 function CustomLink() {
   const css = useStyle({ color: 'gray' })
   const activeCss = useStyle({ color: 'black' })
 
   // React Router `Link` component
   return <Link {...css()} {...activeCss('activeClassName')}>Click Me</Link>
 }
 ```
 */
export default function useStyle(styles: CSSProperties, deps: unknown[] = []) {
  return useMemo(() => {
    const rule = StyleSheet.create({ styles });
    return (prop = 'className') => ({
      [prop]: css(rule.styles),
    });
  }, deps);
}

// Enforce easy types here
function useMakeMapState<MappedState, Args extends ValidArgs>(
  makeMapState: () => (state: State, ...args: Args) => MappedState,
  ...args: Args
): MappedState {
  const mapState = useMemo(makeMapState, []);

  return useMapState(mapState, ...args);
}