Fast Notion v2.7.0 をリリースした（遅延実行モードの実装について）

（技術の話がメインになりそうです）

🐈

2021/04/13 Fast Notion v2.7.0 をリリースしました。今回のリリースでは「遅延実行モード」というものを追加してみました。最近 Fast Notion の Post がモッサリするなと感じていて、これがなんでかと言うと、バックエンドのサーバーからのレスポンスを待ってからクライアント側の状態を変更するという実装にしていたんですね。イメージとしてはこんな感じ。

JavaScript
await post()
// 処理

で、クライアント側で post が完了するまでの時間が、

の2つに依存するかたちになってしまっていました。最近の Notion アップデートで2が少し遅くなっていたような感じがしていて、以前のようなサクサクメモが取れる感覚が少なくなってきたというのが個人的な課題感として持っていました。

その課題を解決するために今回の機能を実装しました。何度か壁にぶち当たったのですが、なんとか実装しきることができました。

🐈

具体的な実装としては、今までが await で post を待つようにしていたのですが、それをやめました。post ボタンを押したタイミングでは await で非同期通信の完了を待つことはせず、post の待ち行列に詰むということだけすることにしました。

JavaScript
post(text) // キューに詰み、バックグラウンドで準備 post 処理を実行
// 処理

React には便利な状態操作できる state 、state に変化があった際の副作用を管理する useEffect があるので、それをうまく利用します。待ち行列を State に詰めて、状態が変わった際に配列の先頭から順次 post していくみたいな実装をしています。※実際はもう少し複雑な処理が入っています。

JavaScript
// 待ち行列を扱う hooks

const [postQueue, setPostQueue] = useState([]);

// post ボタンを押した時のイメージ（実際はもう少し配列操作が加わる）
setPostQueue(text);

// 順次実行していく副作用 hooks
useEffect(() => {
  // 送信処理
}, [postQueue])

今回はけっこうがっつり hooks を使ったので、hooks 設計の勘所が少し分かったような気がします（いままであまり抽象化せず生で localstorage を操作していたところも hooks で抽象化するようにリファクタした）

🐈

ということで Fast Notion v2.7.0 のアップデートの紹介でした。今後とも Fast Notion をよろしくお願いします。

ダウンロードリンクはこちら iOS / Android