Zenn
Open21

『React Docs (Reference)』を読む会

JavaScript
React
ピン留めされたアイテム
あけのあけの

README

読むもの

https://react.dev/reference

目的

Reactへの理解を深める。
使ってはいるが、ドキュメントを一通り読んだことがなかったので読み進めていく。

こちらの続き。
https://zenn.dev/akeno/scraps/d9884a20dbc01b

進め方

参加者が交代で読む。
引っかかった点を話し合ったりコードを書いたりして完全理解してから進む。
どこまで読む等は決めずに時間内(1時間)で読めるところまでを読む。

英語の訳はDeepLやGoogleに頑張ってもらう。

あけのあけの

2023-12-04(月) 20:00-21:00

実績

https://ja.react.dev/reference/react/hooks

次はどこから？

https://ja.react.dev/reference/react/use

MEMO

use以外に特殊なフックがもう一つあった気がする…

https://zenn.dev/uhyo/articles/react-use-rfc#特殊なフック？

useTransitionの話

https://vercel.com/blog/how-react-18-improves-application-performance

parallel-routesでページを分けはじめたら、SuspenseでのClientSideFetchを使わなくなってきた話

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
https://azukiazusa.dev/blog/nextjs-interception-routes/

こういうものを使わずに、RSCでのフェッチで賄えるようになってきた。
https://swr.vercel.app/ja/docs/suspense

RSCはSuspenseするので、SuspenseやFallback自体は使う。
ただ、PromiseやErrorをthrowする側はClientSideには無くなりつつある。
FetchLibraryがSuspenseをサポートしたので積極的に導入してきたが、一周回ってClientSideで用いるFetchLibraryではSuspenseを使わない方向になった。

あけのあけの

2023-12-11(月) 20:00-21:00

実績

https://ja.react.dev/reference/react/use

次はどこから？

https://ja.react.dev/reference/react/use#resolve-promise-in-server-or-client-component

MEMO

シリアライズの話

https://ja.react.dev/reference/react/use#streaming-data-from-server-to-client
https://developer.mozilla.org/ja/docs/Glossary/Serialization
https://developer.mozilla.org/ja/docs/Glossary/Serializable_object

fragment colocation

あけのあけの

2024-01-15(月) 20:00-21:00

実績

  • use#resolve-promise-in-server-or-client-component から

https://ja.react.dev/reference/react/use#resolve-promise-in-server-or-client-component

次はどこから？

  • useCallback と直接関数を宣言することの違い から

https://ja.react.dev/reference/react/useCallback#should-you-add-usecallback-everywhere

MEMO

https://quramy.medium.com/react-server-components-と-graphql-のアナロジー-89b3f5f41a01

https://github.com/welldone-software/why-did-you-render

あけのあけの

2024-01-22(月) 20:00-21:00

実績

  • useCallback と直接関数を宣言することの違い から

https://ja.react.dev/reference/react/useCallback#should-you-add-usecallback-everywhere

次はどこから？

  • useContext から

https://ja.react.dev/reference/react/useContext

MEMO

https://medium.com/i35-267/コンウェイの法則と逆コンウェイの法則から組織構造を考える-bf3f32ebb022

https://future-architect.github.io/articles/20230310a/

https://pr.forkwell.com/tech_event_reports/why-startup-company-software-design-doesnt-work/

あけのあけの

2024-02-19(月) 20:00-21:00

実績

雑談！

次はどこから？

  • useDebugValue から

https://ja.react.dev/reference/react/useDebugValue

MEMO

https://zenn.dev/aishift/articles/ad1744836509dd
https://speakerdeck.com/nkzn/first-year-with-remix
https://findy.connpass.com/event/306714/
https://zenn.dev/hsaki/books/golang-graphql/viewer/dataloader
https://github.com/graphql/dataloader
https://lyohe.github.io/blog/2021/12/16/reading-dataloader/
https://nextjs.org/docs/app/building-your-application/caching
https://github.com/vercel/next.js/issues/49431
https://github.com/vercel/next.js/discussions/54075
https://zenn.dev/akfm/articles/next-app-router-client-cache
https://zenn.dev/yusukebe/articles/b20025ebda310a#hooks
https://speakerdeck.com/yusukebe/hono-v4

あけのあけの

2024-02-26(月) 20:00-21:00

実績

  • useDebugValue から

https://ja.react.dev/reference/react/useDebugValue

次はどこから？

  • useDeferredValue#indicating-that-the-content-is-staleから

https://ja.react.dev/reference/react/useDeferredValue#indicating-that-the-content-is-stale

MEMO

useDebugValue

コンポーネント内で複数存在するとDevToolに配列で表示される。

deferred

https://swr.vercel.app/ja/blog/swr-v2#preserving-previous-state

other

https://azukiazusa.dev/blog/safetest-a-test-library-offering-a-new-ui-testing-approach/
https://github.com/kolodny/safetest
https://github.com/kolodny/react-override

あけのあけの

2024-03-04(月) 20:00-21:00

実績

  • useDeferredValue#indicating-that-the-content-is-staleから

https://ja.react.dev/reference/react/useDeferredValue#indicating-that-the-content-is-stale

次はどこから？

  • how-is-deferring-a-value-different-from-debouncing-and-throttlingの上の落とし穴から

https://ja.react.dev/reference/react/useDeferredValue#how-is-deferring-a-value-different-from-debouncing-and-throttling

MEMO

https://vercel.com/blog/how-react-18-improves-application-performance
https://www.artillery.io/
https://k6.io/docs/using-k6-browser/overview/
https://httpd.apache.org/docs/2.4/programs/ab.html
https://qiita.com/flexfirm/items/ac5a2f53cfa933a37192
https://k6.io/docs/testing-guides/running-distributed-tests/
https://kubernetes.io/ja/docs/concepts/workloads/controllers/deployment/

あけのあけの

2024-03-25(月) 20:00-21:00

実績

  • how-is-deferring-a-value-different-from-debouncing-and-throttlingの上の落とし穴から

https://ja.react.dev/reference/react/useDeferredValue#how-is-deferring-a-value-different-from-debouncing-and-throttling

次はどこから？

  • useEffect#examples-connectingから

https://ja.react.dev/reference/react/useEffect#examples-connecting

MEMO

https://postd.cc/no-more-flickering-ui/
https://web.dev/articles/howbrowserswork?hl=ja#layout

あけのあけの

2024-04-23(火) 20:00-21:00

実績

  • useEffect#examples-connectingから

https://ja.react.dev/reference/react/useEffect#examples-connecting

次はどこから？

  • useEffect#removing-unnecessary-object-dependenciesから

https://ja.react.dev/reference/react/useEffect#removing-unnecessary-object-dependencies

MEMO

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog
https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver
https://zenn.dev/pandanoir/articles/why-wrap-useeffect

あけのあけの

2024-05-07(火) 20:00-21:00

実績

  • useEffect#removing-unnecessary-object-dependenciesから

https://ja.react.dev/reference/react/useEffect#removing-unnecessary-object-dependencies

次はどこから？

MEMO

https://ja.react.dev/blog/2024/04/25/react-19

あけのあけの

2024-05-14(火) 20:00-21:00

実績

次はどこから？

support-for-async-scripts
https://ja.react.dev/blog/2024/04/25/react-19#support-for-async-scripts

MEMO

https://zenn.dev/stray/articles/05449d6b423c7f
https://nodejs.connpass.com/event/315443/
https://speakerdeck.com/mugi_uno/serialize

https://github.com/vercel/next.js/pull/64227
https://nextjs.org/blog/next-14-2#other-improvements

Context.Provider/Consumer

https://github.com/facebook/react/pull/28226
https://github.com/facebook/react/commit/14fd9630ee04387f4361da289393234e2b7d93b6

metadata

https://nextjs.org/docs/app/building-your-application/optimizing/metadata
https://remix.run/docs/en/main/route/meta

CSS

https://speakerdeck.com/uhyo/shadow-domtocssnoxian-zhuang?slide=23
https://zenn.dev/uhyo/articles/next-gen-css-in-js#web-components時代のcss-in-js

あけのあけの

2024-05-21(火) 20:00-21:00

実績

  • react-19#support-for-async-scriptsから

https://ja.react.dev/blog/2024/04/25/react-19#support-for-async-scripts

  • react-19-upgrade-guide

https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide

次はどこから？

  • react-19-upgrade-guide#removed-deprecated-react-dom-apis

https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-deprecated-react-dom-apis

MEMO

https://developer.mozilla.org/ja/docs/Web/API/Web_components/Using_custom_elements
https://zenn.dev/ignorant_kenji/articles/44ef30f730b84b
https://github.com/facebook/react/blob/main/CHANGELOG.md#1830-april-25-2024

あけのあけの

2024-05-28(火) 20:00-21:00

実績

  • useEffect#displaying-different-content-on-the-server-and-the-client

https://ja.react.dev/reference/react/useEffect#displaying-different-content-on-the-server-and-the-client

次はどこから？

useEffect#my-effect-keeps-re-running-in-an-infinite-cycle

https://ja.react.dev/reference/react/useEffect#my-effect-keeps-re-running-in-an-infinite-cycle

MEMO

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wAoAlPmAAdNvhgJcsNgB5CTAG4A+ABIJKlCPgDqOSoTkB6RaoDc4gL7iQVoA

あけのあけの

2024-08-27(火) 20:00-21:00

実績

雑談

次はどこから？

useId

https://ja.react.dev/reference/react/useId

MEMO

This Week In React

https://x.com/thisweekinreact
https://thisweekinreact.com/newsletter

Hokkaido

https://zenn.dev/yumemi_inc/articles/2024-08-25-frontend-conf-hokkaido-2024
https://react-spectrum.adobe.com/react-aria/

TS

https://hiroppy.me/blog/nodejs-strip-type/

Other

https://github.com/mui/material-ui/issues/19450
https://github.com/cenfun/monocart-reporter
https://blog.jxck.io/entries/2024-07-05/why-are-new-browsers-required.html
https://github.com/rrweb-io/rrweb