React is React, just.
I scattered my thoughts on Twitter, so I'll organize them briefly here. Introduction & Premise First, as a premise, I am very much in favor of the approach of using a compiler for optimization. This approach is often effective for improving DX without breaking the interface, and I myself use a framework that emphasizes this. However, I have some questions about the mental model changes (or unifica
props drillingで失敗したReact初心者がレビューで学んだComposition Patternの話 - Qiita
はじめに Reactでアプリを作っていると、こんな状況に出くわしませんか？ 「あれ、このドロップダウンメニュー、ヘッダーでも一覧でも使ってるけど、微妙に項目が違うだけでほぼ同じUIだな...」 私もそうでした。同じようなコンポーネントが複数箇所に散らばっていて、修正するたびに両方を直さないといけない。これはリファクタリングのチャンスだと思い、共通化に挑戦しました。 結果として、props drillingという罠にハマり、先輩のレビューで指摘されて初めて「Composition Pattern」と「Context」の正しい使い方を学びました。 この記事では、私の失敗から学んだことを共有します。 最初の実装（失敗） やりたかったこと ActionMenu を共通コンポーネントにする ヘッダーと一覧で表示する項目を切り替えられるようにする 最初に書いたコード // ItemActionMenu
Reactを根本から理解する：Hooksの仕組みを実装して学ぶ
はじめに この記事のゴール Reactを使っていると、useStateやuseEffectを「こう書けば動く」という形で覚えていることが多いのではないでしょうか。 const [count, setCount] = useState(0); useEffect(() => { console.log(count); }, [count]); このコードは動きます。しかし、なぜ動くのかを説明できるでしょうか。 なぜuseStateは配列を返すのか なぜsetCountを呼ぶと再レンダリングされるのか なぜuseEffectの依存配列に値を入れると、その値が変わったときだけ実行されるのか なぜHooksを条件分岐の中で呼んではいけないのか この記事では、これらの疑問に答えるために、Hooksの仕組みを実際に実装しながら学んでいきます。最終的には、Hooksが「魔法」ではなく、JavaScrip
なぜ "use client" ディレクティブは優れた API なのか
革新的な API は、時としてその真価を理解されるまでに時間を要します。React Server Components そして "use client" ディレクティブもその一例でしょう。Next.js App Router とともに登場して以来、絶えず議論の的となってきたこの API について改めて、光を当ててみたいと思います。 フレームワークロックインを解消する「標準 API」 RSC における "use client" ディレクティブ API は、フレームワークロックインを生み出すどころか、むしろ解消するための革新的なアプローチです。 RSC は Next.js App Router とともに登場したために Next.js の機能の一部であるという誤解や、そのような漠然とした印象が依然として拭えないのも事実ですが、RSC の一部である "use client" を含めてこれらは Re
エフェクトイベント関数はuseEffectのdepsに"入れてはならない" - Panda Noir
depsに入れなくて良い、ではなく、入れてはならない です。 エフェクトイベント関数をdepsに入れるとレンダリング毎にエフェクトが走る useEffectEventは レンダリングごとに新しい関数を返します (検証用デモ)。 そのため、useEffect の deps にエフェクトイベントを含めると毎回エフェクトが実行されます(時にはこれによって 無限ループが起きます ) const effectEventFn = useEffectEvent(callback); // レンダリングのたびに新しい関数が返される useEffect(() => { return listen(effectEventFn); }, [effectEventFn]); // ❌ effectEventFn が入っているので毎回実行される!! なので、depsにeffectEventFnを入れてはいけません。
If I Wrote a Linter, Part 2: Developer Experience | Goldblog
This is how I would tailor the developer experience for a modern linter from scratch: focusing on end-to-end type safety, self-apparent configs, and native workspaces. Today’s web linters are great. ESLint is robust and has a huge ecosystem of plugins and configs. Newer native speed linters such as Biome, deno lint, and Oxlint are fast and easy to set up with their own burgeoning ecosystems. I’ve
How I Use Claude Code
One month ago, I subscribed to Claude Max. I've been using AI agents including Claude Code for some time prior, but with the flat pricing, my usage skyrocketed and it's become a daily driver for many tasks. I find myself going to VS Code much less often now. Since AI agents are new for everyone right now, I thought it might be fun to share some patterns I've been noticing recently. Here's how I us
DeepIntoDev | In-Depth Software Development Insights
In the world of software development, filled with frameworks, libraries, and abstractions, I often felt like I was just using technologies without truly understanding them. So, I started digging deeper, reading more, and researching. That’s why I created this blog: to break down complex programming concepts into simpler, easy-to-understand explanations. DeepIntoDev is the place where you can under
Facebook Relayについてまとめ - Qiita
Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 **結局データをサーバからとってくるところってどうなってるの？**ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか
From Chaos to Clarity: The Critical Role of Architecture
In the fast-paced world of modern development, architecture often determines whether a project thrives or crumbles under its own complexity. While many developers intuitively understand that architecture matters, the "why" and "how" are less frequently discussed. What makes architecture so critical, and how can you ensure that your choices lead to clarity rather than chaos? This article is helpful
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatKit.js
If I Wrote a Linter, Part 4: Summary | Goldblog
Hydration mismatch回避にuseEffectを使うな - Qiita
フロントエンドのデザインパターン