useContext 是一個 React Hook，因為React為單向資料流的特性，所以當我們需要在不同的 component 之間共享資料時，我們通常會透過 props 來傳遞資料，但是當 component 的層級越來越深時，這樣的寫法會變得非常麻煩，這時候 useContext 就可以派上用場，作為一個傳送門useContext可以像下圖中自由的傳遞props。

Ref:dev.react.com

使用方式

1.建立一個 空的context並且導出
常見作法是在建立一個新的檔案中建立一個空的context並且導出，檔名可以隨意取名。

import { createContext } from 'react';
export const MyContext = createContext(null);

2.在最上層的component中使用Provider，並包裹住想要傳遞的元件，傳遞想要傳入的porps

import { MyContext } from './useContext.jsx'
let AAA="132"

<MyContext.Provider value=&#123;&#123;AAA&#125;&#125;>
  <App />
</MyContext.Provider>

3.可以在porvider包裹住的情況下，使用useContext來取得資料

import { MyContext } from "./useContext.jsx";
const {AAA}=useContext(MyContext)

前言

根據 React 官方文件中的說明，useMemo 會在渲染期間記住傳入的函式，並且在渲染期間避免重複執行該函式。

什麼時候使用 useMemo

官方文件也強調你應該僅僅把 useMemo 作為性能優化的手段。如果沒有它，你的程式碼就不能正常運作，那麼請先找到潛在的問題並修復它。然後再添加 useMemo 以提高性能。

useMemo 的使用方式

useMemo(calculateValue, dependencies)
calculateValue:裡頭帶一個 callback 並寫入需要處理的函式
dependencies:依賴的值，當這個值改變時，useMemo 才會重新執行

const result = useMemo(() => {
  add(countA);
}, [countA]);

useMemo 的使用場景

如下方的例子，如果沒有使用 useMemo，當我們點擊 countB 按鈕時，同樣會執行 add 函式，但是我們只想要 countA 改變時才執行 add 函式，因為我們只在乎 result 的結果而在下方範例中 result 又只有跟 countA 有關係，這時候就可以使用 useMemo 來避免重複執行 add 函式。

但是附帶一提，其實沒有使用 useMemo 也不會有什麼問題，因為 就頂多是重複執行 add 函式而已，但是如果 add 函式是一個很耗時的函式，那麼就會造成效能上的問題，這時候就可以使用 useMemo 來避免重複執行 add 函式。

function add(n) {
  console.log("我被執行了");
  return n * n;
}
function App() {
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);
  const result = useMemo(() => {
    add(countA);
  }, [countA]);
  return (
    <>
      <button
        onClick=&#123;() => &#123;
          setCountA((countA) => countA + 1);
        &#125;&#125;
      >
        count is &#123;countA&#125;
      </button>
      <button
        onClick=&#123;() => &#123;
          setCountB((countB) => countB + 1);
        &#125;&#125;
      >
        count is &#123;countB&#125;
      </button>
      <p>&#123;result&#125;</p>
    </>
  );
&#125;