xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

React useMemo

react hooks

https://reactjs.org/docs/hooks-reference.html#usememo

useCallback & useMemo

the difference is that useCallback returns a memoized callback and useMemo returns a memoized value

https://flaviocopes.com/react-hook-usememo/

import React, { useMemo } from 'react';

// cache value
const memoizedValue = useMemo(() => expensiveOperation());


const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])

import React, { useCallback } from 'react';

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

refs

https://medium.com/javascript-in-plain-english/react-usememo-and-when-you-should-use-it-e69a106bbb02

https://kentcdodds.com/blog/usememo-and-usecallback

https://www.digitalocean.com/community/tutorials/react-usememo

https://usehooks.com/useMemo/

https://jancat.github.io/post/2019/translation-usememo-and-usecallback/

https://www.youtube.com/watch?v=RkBg0gDTLU8

useFetch

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-06-08
 * @modified
 *
 * @description useFetch 自定义 react hooks
 * @augments
 * @example
 * @link
 *
 */

import {
  useEffect,
  useState,
  useRef,
} from "react";

const log = console.log;

const useFetch = (url = ``) => {
  const isCurrent = useRef(true);
  const [state, setState] = useState({
    data: null,
    loading: true,
  });
  useEffect(() => {
    return () => {
      // component unmount
      isCurrent.current = false;
    }
  }, []);
  useEffect(() => {
    setState(state => ({
      data: state.date,
      loading: true,
    }));
    fetch(url)
    .then(res => res.json())
    .then(json => {
      log(`json`, json)
      if(isCurrent.current) {
        setState({
          data: json.date,
          loading: false,
        })
      }
    })
    return () => {
      cleanup
    }
  }, [url, setState]);
  return state;
}

export default useFetch;

export {
  useFetch,
};

https://github.com/benawad/react-hooks-tutorial/blob/5_useMemo/src/useFetch.js

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---