We migrated 50,000 lines of code to React Server Components
Published on July 19, 2023 (9 months ago) Everything I wish I knew before moving 50,000 lines of code to React Server Components React Server Components are a lot. We recently rethought our docs and rebranded Mux and, while we were at it, moved all of mux.com and docs.mux.com over to Server Components. So… believe me. I know. I also know that it’s possible and not that scary and probably worth it.
Getting started with ReasonReact and Melange
A bit of background To quote the official docs: Melange is a backend for the OCaml compiler that emits JavaScript. Melange strives to provide the best integration with both the OCaml and JavaScript ecosystems. Basically, Melange lets you generate JS code from OCaml code. Reason (aka ReasonML) is an alternative syntax for OCaml that looks more like JS. Reason React are Reason bindings to React so t
RSC From Scratch. Part 1: Server Components · reactwg/server-components · Discussion #5
RSC From Scratch. Part 1: Server Components In this technical deep dive, we'll implement a very simplified version of React Server Components (RSC) from scratch. This deep dive will be published in several parts: Part 1: Server Components (this page) Part 2: Client Components (not written yet) Part 3: TBD (not written yet) Seriously, this is a deep dive! This deep dive doesn't explain the benefits
Understanding React Concurrency
React v18.0 has broken ground by introducing a long-awaited feature: Concurrency! Unfortunately, despite a deluge of resources explaining how to use it, explanations of how it works are sparse. As it is a low-level feature, it’s not critical to understand React’s idea of concurrency, but it doesn’t hurt! This post does not attempt to exhaustively document React’s Concurrent API and best practices.
The Interactive Guide to Rendering in React
The Interactive Guide to Rendering in ReactTyler McGinnisUpdated April 26, 202310 minute read React, in its purest form, is a library for building user interfaces. It's so simple that the entire mental model can be represented as a formula, v = f(s) – where your view is simply a function of your state. Though this equation gives us a simple mental model for how React works, there's one aspect of t
React Is Holding Me Hostage
Feb 22, 2023 • 23 minute read React Is Holding Me Hostage A love & hate relationship Table Of ContentsPrologueReact & HooksReadability v.s. ComplexityA Better Mental ModelFinding FootgunsComponents As Reactive ObjectsMemoizationOn PedagogyFixing ReactFine-Grained ReactivityConclusions On Issues #Prologue It feels like this article would have been sacrilege only a few years ago. Under protection of
First-class Support for TypeScript · React Native
With the release of 0.71, React Native is investing in the TypeScript experience with the following changes: New app template is TypeScript by defaultTypeScript declarations shipped with React NativeReact Native documentation is TypeScript FirstIn this post we’ll cover what these changes mean for you as a TypeScript or Flow user. New App Template is TypeScript By DefaultStarting with 0.71, when y
図で分かるReact18のしくみ
これは何? この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 Advent Calendar 2022 の17日目の記事です。 対象読者 Reactの内部コードを読む気は無いが、裏で何をしているのか把握しておきたい方 これからReactの内部コードを読もうと思っている方 暇な方 Fiberについて まず最初に、Reactのドキュメントを漁っていると度々出現する「Fiber」についてお伝えします。 そもそもFiberとは何か 一部例外はありますが、1個のFiberは1個のコンポーネント（<MyComponent>や<div>など）管理
ep.112『Reactの重要ライブラリTanStackについて語りたい！』 | UIT INSIDE
@spring-rainingが、@potato4dと@uhyo_にReactのライブラリ群を公開しているTanStackについて聞いてみました。 https://tanstack.com/ React Query、React LocationなどのReactライブラリを公開しているプロジェクト群 Tanner Linsley氏が主導 https://github.com/tannerlinsley シンプルで筋の良いAPI設計 (@potato4d) React Query https://react-query.tanstack.com/ APIなどのfetch、ステート同期ライブラリ Reduxによるステート管理に一石を投じた 似た機能を持つSWRとの比較 https://swr.vercel.app/ React Location https://react-location.ta
How React server components work: an in-depth guide
React server components (RSC) is an exciting new feature that will have huge implications on page load performance, bundle size, and how we write React applications in the near future. We at Plasmic make a visual builder for React, and we care a lot about React performance — many of our customers use Plasmic to build performance-critical marketing and e-commerce sites. And so, even though RSC is s
A Visual Guide to useEffect
Here is what happens when you try to fetch data directly from the body of a functional component in React 👇 Why does this happen and what tools does React offer to solve this problem? Side effects If your React component affects anything outside of itself, it’s called a side effect. Side effects shouldn’t happen during component render. Therefore they do not belong to the body of a functional com
A Visual Guide to React Rendering - Cheat Sheet
When does react component re-render? What can cause the re-render, and how to prevent unnecessary renders? Here is a quick cheat sheet you can refer to whenever you find yourself asking these questions. This article serves as a table of contents for a Visual Guide to React Rendering series. Every section of the cheat sheet links to the correspondent chapter of the guide that explores a topic in de
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
GitHub - dai-shi/will-this-react-global-state-work-in-concurrent-rendering: Test tearing and branching in React concurrent rendering
With useTransition Level 1 ✓ No tearing finally on update (7990 ms) ✓ No tearing finally on mount (4608 ms) Level 2 ✓ No tearing temporarily on update (12955 ms) ✓ No tearing temporarily on mount (4546 ms) Level 3 ✕ Can interrupt render (time slicing) (7926 ms) ✕ Can branch state (wip state) (6655 ms) With useDeferredValue Level 1 ✓ No tearing finally on update (9568 ms) ✓ No tearing finally on mo
Using React with D3.js
React.js is a JavaScript library that helps with building complex user interfaces. This website is written using React! I would recommend being familiar with React for this article. It might be worth running through the official tutorial or running through a book (I've heard good things about this one) to make sure you don't stumble on anything in here!
ウェブフロントエンドの設計力を高めるためにアプリケーションの構造を捉えてみる話 - Chatwork Creator's Note
こんにちはー。 フロントエンド開発部の火村(ひむら/id:eiel)です。前回までは id:cw-himura で記事を書いていましたが、個人アカウントに切り替わりました。 よろしくおねがいします。 以前はサーバーサイド開発部に所属していましたが、2019年6月ぐらいからフロントエンドチームにヘルプとして無期限レンタル移籍中です。 主な担当している業務は「難しいバグ対応」と「これからChatworkのウェブフロントエンドをどうするかを考える」です。 昨日は期待の新人であるレオくんの入社して3ヶ月の熱烈な想いでした。アツいです。 さて、今回のお題は「レガシーフロントエンド脱却への挑戦」と雑に上から投げられたのですが、未来のことを考える作業をしているので書きやすいネタがありません。 あってもオチがつきません。 ということで、設計に役立つかもしれない話をラフに書くことにしました。 アプリケーショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kaychaks/autopack: Auto build and run a React app within a Docker container without a Dockerfile
GitHub - alvarlagerlof/rsc-parser: A parser for the React Server components when sent over the network
GitHub - shuding/tilg: A magical React Hook that helps you debug components.
GitHub - DioxusLabs/dioxus: Fullstack GUI library for web, desktop, mobile, and more.
