← Back

週間React Native #6

2025-10-16 / #6

今回はReact Confの話題を中心です。

React Conf 2025の開催

ReactやReact Nativeなど、Reactにまつわるカンファレンスが現地時間の10月7日から8日にかけて行われました。 特に、今回はReact Nativeについての話題も多く、React Nativeの熱が高まっているのを感じました。

https://conf.react.dev/agenda

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

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

React Foundationの設立

React Confで、React、React Nativeを含むReact周辺エコシステムのプロジェクトがMetaからReact Foundationに移行されることが発表されました。 これまで、OSSではありつつ、MetaがReactを主導する立場ではありますが、React Foundationに移行することによって、さらにオープンで中立的な体制に変わります。 今後はMetaの支援のほか、Amazon、Callstack、Expo、Meta、Microsoft、Software Mansion、Vercelなど多くの企業が支援していくとのことです。

https://engineering.fb.com/2025/10/07/open-source/introducing-the-react-foundation-the-new-home-for-react-react-native/

React Native 0.82

React Native 0.82が登場しました。

https://reactnative.dev/blog/2025/10/08/react-native-0.82

New Architectureのみがサポート

0.76からデフォルトでNew Architectureが設定されていましたが、今回の0.82ではNew Architectureでのみ動作するようになりました。 そのため、オプションで “newArchEnabled=false” や “RCT_NEW_ARCH_ENABLED=0” のようなNew Architectureを無効化する設定がされていても、それらは無視されます。

ただし、Legacy ArchitectureをReact Nativeのコアから削除するのは、次回の0.83のバージョンで行われる予定です。（互換性を損なう変更を減らすため）

Hermes V1を実験的に導入

React NativeではHermesというJavaScriptのエンジンが導入されていますが、そちらのV1バージョンがオプトインでサポートされました。

Hermes V1ではバンドルの読込時間、TTI（Time to Interactive、バンドルが読み込まれてレンダリング→インタラクティブになるまで）の指標が改善されました。

ちなみにHermes V1は、以前発表されていたStatic HermesやJITコンパイルなどの機能は含まれていないそうです。 それらは現在もテスト中で、将来的にサポート予定とのことです。

React 19.1.1

React Native 0.82ではデフォルトのReactバージョンが19.1.1となります。

React 19.1.1ではReact NativeにおけるSuspense内でのuseDeferredValueとstartTransitionの挙動が修正されました。 以前は、React NativeでSuspenseと一緒に使用すると、両方とも誤ってフォールバックコンポーネントを表示していました。 React 19.1.1では、これらはReact Nativeで期待通りに一貫して動作するようになり、Webの動作と一致するようになりました。

DOMノードAPI

WebのDOMと同じように、refによる要素の参照を行えるようになりました。 例えば、以下のように要素のrefから “getBoundingClientRect()” でサイズの取得が可能になります。

function MyComponent(props) {
  const ref = useRef();

  useEffect(() => {
    const element = ref.current;

    // New methods
    element.parentNode;
    element.parentElement;
    element.childNodes;
    element.children;
    const bounds = element.getBoundingClientRect();
    const doc = element.ownerDocument;
    const maybeElement = doc.getElementById('some-view');

    // Legacy methods are still available
    element.measure((x, y, width, height, pageX, pageY) => {
      /* ... */
    });
  }, []);

  return ;
}

詳細はこちら

https://reactnative.dev/docs/nodes

Web Performance API

React Nativeで “performance.now()” のような、Webで利用可能なperformance APIが実装されました。

これにより、アプリのパフォーマンスの追跡を行うことができ、React Nativeの将来のバージョンではReact Native DevTools上でパフォーマンスの計測を行うことが可能になります。

このツイートによると、クリスマス頃にスケジュールされているようです。

VirtualView APIの登場

ScrollView内で効率よくレンダリングを行うためのVirtualViewコンポーネントが実験的に追加されました。

https://reactnative.dev/docs/next/virtualview

基本的にViewコンポーネントと同様の振る舞いをし、次のように、ScrollView内の子要素として配置します。



    Hello world!

以下の図のように、表示領域から出たときに、自動的にアンマウントされてメモリが解放されます。 また、表示領域に近づいたときに、プリレンダリングされてスムーズなスクロール体験を実現できます。

React Nativeでは効率的なリストの表示を行うために、FlatListコンポーネントが存在します。 FlatListとの主な違いは以下の通りです。

ScrollView + VirtualView

Uniwind

React Native Unistylesの開発元から、TailwindスタイルでスタイリングすることができるUniwindが登場しました。

詳細はこちらのZennをご参考に。

https://zenn.dev/tellernovel_inc/articles/5aa0fd3a3179ae

Liquid Glass with Skia

React Native Skiaを開発しているWilliam Candillon氏が、SkiaでLiquid Glassのような表現を行う方法の動画を投稿しました。

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

ExpoでCSSパーサーとTailwindの対応中

ExpoでネイティブでCSS、およびTailwindをサポートする予定とのことです。 これにより、NativeWindのようなサードパーティのライブラリを導入しなくとも、Expoを利用することでTailwindのAPIでスタイリングが可能になるようです。

今週のひとこと

今週はReact Confもあり、話題が多かったですね！ React Foundationの設立は、今後のReactおよびReact Nativeの持続性の観点で非常に良いニュースだと思いました。 また、React Foundationを支援するほとんどの企業が、React Nativeを推進している企業で、ReactエコシステムにおけるReact Nativeの勢いが非常に強くなっている印象を受けました。

日本でもReact Nativeがもっと様々な企業で使われていくといいですね…！