React 19 New API: `use`

3 min readJun 23, 2024

大家好我是奶綠。
React19 推出了新的 API, React.use。

他可以用來讀取 promise 和 Context 物件。

const App = ()=> {
  const ctx = React.useContext(SomeContext); // React 18
  const ctx = React.use(SomeContext); // React19
  return <div></div>
}

重點是 React.use 可以用在非 React Render 的函式裡。

const App = ({children}) => {
  if (children == null) {
    return null;
  }
  const theme = use(ThemeContext);
  //
}

過去 Context 的問題就是只要 provider value 有更新，有用到的子 Component 也都會一同更新，這點在 React19 還是相同的行為。
不過我們可以結合 React.use，來達到部份的效能優化。

const MyContext = React.createContext();
const App = () => {
  const [count ,setCount] = useState(0);
  const providerValue = useMemo(()=> {
    return {
      count,
      setCount
    }
  }, [count])
  return (
    <MyContext value={providerValue}>
     <MyChild />
    </MyContext>
  )
}

const MyChild = () => {
  const { setCount } = React.useContext(MyContext);
  // 只要 providerValue 有更新，這裡也會更新。
}

const MyChildUse = () => {
  // 在這可以使用 useMemo + React.use　
　// 就可以避免不必要的更新
  const setCount = useMemo(()=> {
    return React.use(MyContext).setCount;
  }, [])

}

那可不可以用相同的手法來拿只需要用到的 Context value 呢 ?

const MyChildUse2 = () => {
  const count= useMemo(()=> {
    return React.use(MyContext).count;
  }, [])

}

雖然這樣寫 React 會過，但這樣當 Context count 有更新時，該 Component 並不會知道，所以結論是不可行的。

Reference:
https://react.dev/blog/2024/04/25/react-19#new-feature-use

React 19 New API: use

Written by Milk Midi

React 19 New API: `use`