Frontend Weekly 2024-02-16

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 というパッケージがリリースされました。

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

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

1
import eslint from '@eslint/js';
2
import tseslint from 'typescript-eslint';
3

4
export default tseslint.config({
5
  eslint.configs.recommended,
6
  ...tseslint.configs.recommended,
7
})

Hono v4#

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

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

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

5
toSSG(app, fs);

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

4
function Counter() {
5
  const [count, setCount] = useState(0);
6
  return (
7
    <div>
8
      <p>Count: {count}</p>
9
      <button onClick={() => setCount(count + 1)}>Increment</button>
10
    </div>
11
  );
12
}
13
// ...
14

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