React Compiler

2024年2月15日のReactの記事にて、React Forgetとして知られていたReact Compilerについて触れられていました。React Compilerは既にInstagramの本番環境で動作しているそうです。

https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024

React Compilerによって、今までuseMemoやuseCallback、memoなどを利用して手動で行われていたメモ化が自動で最適化されるようになります。またReactコアチームのメンバーは、この記事を紐付けてuseMemo、useCallback、memo、forwardRef、React.lazy、useContext、throw promise、Context.Providerは2024年末までに不要になると語っています。

typescript-eslint v7

2024年2月12日にtypescript-eslint v7がリリースされました。

Flat configが正式にサポートされています。

https://typescript-eslint.io/blog/announcing-typescript-eslint-v7/

Flat config用にtypescript-eslintというパッケージがリリースされました。

pnpm remove @typescript-eslint/parser @typescript-eslint/eslint-plugin
pnpm add typescript-eslint

なお、次のように利用例でtseslint.configという関数が使われていますが、これは別にtypescript-eslint用の設定をしてくれるようなものではないため、実際は利用しなくても大丈夫です。

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config({
	eslint.configs.recommended,
  ...tseslint.configs.recommended,
})

Hono v4

2024年2月9日にHono v4がリリースされました。

https://github.com/honojs/hono/releases/tag/v4.0.0

Static Site Generation

静的ページを書き出してサイトを作る機能がリリースされました。ViteのSSGビルドをするためのプラグイン@hono/vite-ssg も公開されました。

import fs from "node:fs/promises";
import { toSSG } from "hono/ssg";
import app from "./src/index";

toSSG(app, fs);

Client Components

テンプレートエンジンの代替としてサーバー側で実行するように設計されていた hono/jsx が、クライアントでも実行できるようになりました。

Reactと同じコードがHonoで実行できます。

import { useState } from "hono/jsx";
import { render } from "hono/jsx/dom";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
// ...

const root = document.getElementById("root");
render(<App />, root);

ReactのAPIであるuseEffectやstartTransition、useContext、useなども利用できます。

File-based Routing - HonoX

ViteとHonoをベースとしたフルスタックWebフレームワークHonoXがリリースされました。Honoの機能に加えて、Next.jsのようなFile-base RoutingやIslands Architectureなどの機能を利用することが出来ます。