React v18 での Effects に関する変更内容(予定)
The Plan for React 18 のブログで React v18 の計画が発表され、アルファもリリースされました。当初の計画からは色々と変わりましたが、順調に進めば今年中に v18 がリリースされそうです。 このアルファリリースは、React 関連のライブラリ作者に試してもらってフィードバックもらうことを目的にしているため、現時点でプロダクトのコードに導入することは推奨していません。 アルファリリースなのでまだまだ破壊的な API も予想されます。 reactwg/react-18 フィードバックをもらう場所として、reactwg/react-18 という GitHub Discussions のためのリポジトリが作成されています。この Discussions は誰でも見ることはできますが書き込めるのは Collaborators になっている人のみです。そのため比較的議論の内容
react-window 調査 まとめ
こんにちは、ハトです。 いろいろ時間をかけて調査した結果、使わないことになったので供養します(ち〜ん) 長いリストのパフォーマンスを向上させる Reactで長いリストをレンダリングするときに、初期のレンダリング時にコストをすべて払います。これを画面が表示される部分だけレンダリングさせるようにしたライブラリがreact-windowです。React公式サイトのパフォーマンス向上ライブラリの１つとして紹介されています。 こちらを調査する機会があったので、それをまとめてみました。react-windowはgridの機能もあるのですが、今回はリストのみ調査対象です。 サイト 概要 実際にリストをすべてレンダリングするのではなく、画面に表示されている領域のみをレンダリングする技術。それによって、リストをすべてレンダリングするコストを回避しています。 ライブラリ内部に仮想のリストを保持してあり、リスト
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説 - ICS MEDIA
Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが（参照：npm trends）、記事『ベストな手法は？ Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。本記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基本的には作法的な書き方はあまり軽減しませ
React界隈で話題になっている「React Server Components」についてまとめました！ | DevelopersIO
どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得している間と人気の曲・アルバム一覧を取得するまでにクライアントサイドとサーバーサイドで無駄な待機時間が出来てし
React17におけるJSXの新しい変換を理解する
今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換
React17におけるuseEffectの破壊的変更を理解する
しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます（以下は公式サイトから引用）。 In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.
Flutter vs React Native vs Native: Deep Performance Comparison | inVerita
Flutter vs React Native vs Native: Deep Performance Comparison The Story Behind the Research As a custom software development company, inVerita and its mobile development team continuously dig into the performance of cross-platform mobile solutions available on the market, that’s how Flutter vs React Native vs Native Part I emerged. Yes, it was quite controversial as one can state we weren’t using
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
僕のフロントエンド技術に対するスタンス｜erukiti
僕は日頃からReact Hooks + TypeScript 最高だの言ってますけど、実のところ、それらを超えるモノが登場したら一瞬で「React Hooksなんて過去の技術だよねー、#にゃーん（社会性フィルター）」とか「TypeScript？へなにそれ？過去の言語ですよね」とかボロクソに言ってる自信があります。 補足: ボロクソにいうとは限りません。その頃に、単に手のひらクルーって返してるだけで、新しい技術を「〇〇＋□□最高！」って言ってるだけになるように、人格的に成長してるかもしれませんｗ 僕にとっては技術はただの道具にすぎません。 道具に対して必要以上の思い入れもしなければ、信仰する気持ちもありません。というより今あるクソなモノよりマシなものを求める渇望がここ数十年ずっと続いてる感じです。 そんな僕が判定するフロントエンド技術の数々を書いてみます。ブログなんでぶっちゃけテキトウで率直
Reactで文字列内のURLをリンク(<a>タグ)にする方法 - Qiita
TL;DR; 文字列内のhttp~を<a>タグでリンクにしたい react-string-replaceを使えば簡単にできたのでメモ＆共有 サンプルおいておく react-string-replace npm i -S react-string-replaceする(もしくはyarn add -S react-string-replace) react-string-replaceをimportもしくはrequireする 正規表現でマッチした文字列を<a>タグで囲むだけ 配列の文字列とかでももちろん問題なく動く import reactStringReplace from "react-string-replace"して、 reactStringReplace(text, regExp, callback);とするだけ 以下サンプル import React from "react"; im
SPA(React)にGoogleAnalyticsを導入する際のパターン - Qiita
import ReactGA from 'react-ga'; ReactGA.initialize('トラッキングID'); ReactGA.pageview('任意のpath_name'); <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); // gtag('config', 'GA_MEASUREMENT_ID
React Hooksで非同期処理を仕掛ける場合、refが便利 - Qiita
React Hooksを使っていくと、今までの感覚ではうまくいかないことがよくあります。 大前提：関数内の関数はクロージャを形成する ReactではなくJavaScriptレベルの話ですが、関数内のローカル変数は関数の実行ごとに生成されます。そして、関数Aの内で別な関数Bを作成して、Bの中からAのローカル変数を参照すると、Aの実行によって生成された変数が、Bから使うためにAの終了後も生き残ることとなります。これが「クロージャ」です。 React Hooksの場合 React Hooksを使う場合、忘れてはならないのは、コンポーネントの描画ごとに関数が再実行されることです。ただ単にコンポーネント内で書いた関数ももちろんクロージャになりますが、コンポーネントの描画（=再実行）ごとに関数が再生成されますので、そのままReact内のイベントハンドラなどにセットしている場合は値の束縛の問題は生じませ
React.useMemoの配列にはstate値も必要 - Qiita
React Hooksを元気に使っていたのですが、useMemoで必要以上にメモされるというトラブルが起きてしまいました。 React.useMemoとは Reactのrender関数内で、その場で作った無名関数を使うと、renderのたびに関数が再生成されてしまって、不必要に下位コンポーネントのrenderが必要となってしまいます。また、配列の絞り込みなど複雑な操作を毎回行うと、そのコストもかさみます。 そこで使えるHookが、React.useMemoです。useMemo(() => 欲しい値, [依存する変数の配列])のようにすることで、依存する変数の配列が変化したときだけ無名関数を実行して欲しい値を生成するようになります。 なお、コールバック関数の場合、通常「コールバック関数を作るコストの削減」より「関数を不必要に再生成しない」ということが求められますので、コールバック関数を直接指
useEffect完全ガイド
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？ []ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使
React Nativeアプリのサイズを35%減らした話 Android編 - KitchHike Tech Blog
CTOの Shoken です。キッチハイクアプリはReact Nativeで開発を始めて3年目に入りました。アプリのサイズは開発を続けるうちに大きくなっていってしまいます。この記事では React Native アプリが、どのファイルでサイズが大きくなっているかの分析と、Androidでアプリのダウンロードサイズを減らした方法を紹介します。 サマリ キッチハイクアプリでは JS Bundle は 3.4 MB 、フォントは 48 MB だった。 Androidはビルド時の最適化オプションとApp Bundleにすることでサイズが 35% 減った。80.6 MB -> 66.8 MB サマリ JS Bundle のサイズを調べる react-native-bundle-visualizer を使った JS Bundle の構成を確認する Android Studio APK Analyzer
React Componentの実装ルールを決めてみた - Money Forward Developers Blog
こんにちは。 経費精算サービス「マネーフォワード クラウド経費」の開発チームでフロントエンドエンジニアをしている坂本です。 クラウド経費ではJSのライブラリとしてReactを採用しているのですが、最近クラウド経費で React Component を実装する際のルールをまとめたので、その話を書こうと思います。 なぜルールをまとめようと思ったのか Componentの分割ルールとしてAtomic Design、スタイルの管理としてstyled-components、GraphQL用のライブラリとしてApollo Clientを導入し実装を進めています。 昨年の10月までは挙げた３つとも使用していなかったので、試行錯誤しながら進めています。 チームメンバーの各々が試行錯誤しながら実装を進めていくので、最近はチーム内で認識の齟齬や持っている情報に差が出るようになりました。 そこで一旦現状を整理し
Don't Eject! – Leave your Create React App in the Disc Drive
Don’t Eject! – Leave your Create React App in the Disc Drive Create React App is the easiest and most available way to get into React. And ejecting your app is seen as the gateway to being a “Real React Developer.” I’m not normally for gatekeeping, but ejecting is worth avoiding. Today, I’m going to try and convince you to take your hand off the eject button. What Create React App Does Create Reac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Top Productivity React Developer Tools
Redux の利点を振り返る
Hooks時代の設計の話 #agrinoteinside
