Hatena Blog Tags
はてなブログ トップ
useMemo
このタグでブログを書く

useMemo

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
stmn tech blog•5 日前

Reactでメモ化によるパフォーマンス改善を狙う

はじめに はじめまして。株式会社スタメンでエンジニアをしております永井です。 今回の記事ではReactでメモ化によるパフォーマンスを意識した実装方法について書きたいと思います。 なぜパフォーマンスを意識した実装が大切なのでしょうか。 なぜなら、ユーザーのある操作に対するレスポンスの速度を高めることは、UXの文脈において非常に重要な要素だからです。例えば、100ms未満のレスポンスに関してはユーザーは瞬時に感じられますが、100ms ~ 300msではすでに遅いと感じてしまいます。遅いことにストレスを感じたユーザーは、別のサービスにリプレイスしてしまうかもしれません。 Reactでパフォーマンス…

#react#Reactmemo#useCallback#useMemo

関連ブログ

インターラプト開発者ブログ•昨日

絶対に再レンダリングさせたくない場合のコンポーネント活用

TL;DR useMemoを使って一切再レンダリングされないコンポーネントを作成する コンポーネント内のDOM更新は dispatchEventを利用する 絶対に再レンダリングさせたくない jQueryなどで直接DOM操作しているライブラリをReactから呼び出して使うと、すこし困ったことがあります。Reactはコンポーネントが管理しているStateに変化があると、コンポーネントの持つHTML(JSX)を再レンダリングするのですが、jQueryなどでレンダリングした部分が消えてしまうためもう一度jQueryでレンダリングを行う必要があります。 この際に、jQueryライブラリが内部で持っている…

stmn tech blog•5 日前

Reactでメモ化によるパフォーマンス改善を狙う

はじめに はじめまして。株式会社スタメンでエンジニアをしております永井です。 今回の記事ではReactでメモ化によるパフォーマンスを意識した実装方法について書きたいと思います。 なぜパフォーマンスを意識した実装が大切なのでしょうか。 なぜなら、ユーザーのある操作に対するレスポンスの速度を高めることは、UXの文脈において非常に重要な要素だからです。例えば、100ms未満のレスポンスに関してはユーザーは瞬時に感じられますが、100ms ~ 300msではすでに遅いと感じてしまいます。遅いことにストレスを感じたユーザーは、別のサービスにリプレイスしてしまうかもしれません。 Reactでパフォーマンス…

めも•21 日前

Reactで簡単なアプリケーションを作成するための準備（２）

この記事は何 メモ パッケージマネージャ yarn npm Reactのライフサイクル イベント処理 フック 副作用 メモ化 コンテキスト useRef カスタムフック APIモック 参考文献 この記事は何 Reactの学習メモ。 前回：Reactで簡単なアプリケーションを作成するための準備（１） - めも メモ パッケージマネージャ npmとyarnのコマンド早見表 - Qiita yarn Home | Yarn - Package Manager Yarnとは - IT用語辞典 e-Words JavaScriptのパッケージマネージャ、package.jsonで指定されたパッケージをイ…

monologue•先月

React 各hooksの覚え書き

Reactでは今やスタンダートになったhooksについて、公式APIとして提供されているものは色々あるが、今まではせいぜい useState useEffect 程度しか使っていなかった。 最近徐々に他のhooksを使うシーンがあり、かなり便利だし、パフォーマンス観点でも使いこなせないとまずい気がして調べたのでまとめ。 公式のhooksは下記にまとまっている。 ja.reactjs.org TL;DR useState はいわゆる state の保持・変更、複雑state管理なら、useReducerを検討してもいいかも useEffect はレンダリング後に処理（副作用）したいときに利用、処…

data-engineer's note•先月

react hooksの基本的使い方

目的 現在、フロントエンド開発で色々とHooksを使用したコンポーネント開発を行っているので、基本的な使い方を整理することで自分の知識を整理する。 Hooksとは Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. (We don’t recommend rewriting your exi…

Vapor Trail•2 か月前

2020年振り返り

Cordova 経験として身についたこと。 Sass BEM記法 Vue.js Cordova・ネイティブ関係の知識とか改善したこと WKWebView対応 UniversalLinkの設定 署名付きAPKのビルドの自動化 デプロイゲートの利用 ReactNative React Hooks 非同期 Redux Toolkit コンポーネント設計 ReactNativeで開発するにあたって参考にしたものとか Cordova 4月あたりからcordova+cakephpの仕事を引き継いで機能追加やバグ修正をしていた。cordova全くわからんかったけど、html+css+jsでwebview表示…

threecourse’s blog•2 か月前

フロントエンド何もわからない（その５）〜 React Hooks + Redux + TypeScriptでいいんじゃね

去年から悩んで来ましたが、React (React Hooks + Redux) + TypeScript に落ち着きそうな気がしてきました。 前提 Webページの制作よりは、ヒューリスティックコンテストや数理最適化などのビジュアライザをさくっと作るのが主な目的です。 メインのフレームワーク React (React Hooks + Redux) + TypeScript としました。 React Hooks + Reduxの使い方はこんな感じでシンプルです。 ReduxのReducerやActionを定義 Providerを定義し、Reduxのストアをコンテキストとして情報を伝える useS…

フリーランス　技術調査ブログ•2 か月前

strapiの管理画面のソースの場所を確認する

はじめに strapiのドキュメントに記載されている方法で管理画面のレイアウトを変更してみる。（うまくいきませんでした。） strapi.io デフォルトの画面 何も変更していない場合の画面は下記の状態になっている strapiの管理画面関連のファイルはApp_Root/node_modules/strapi-admin/admin/src/の中にあり、画面のView側にあたる部分は App_Root/node_modules/strapi-admin/admin/src/containers/に格納されているようです。下記がディレクトリ構成となります。 .App_Root/node_modu…

KitchHike Tech Blog•2 か月前

RN Features 2020年12月号 - React Native Advent Calendar 2020, React Server Components, アップデートのハマりポイント事例

はじめに キッチハイクのエンジニアメンバーでReact Nativeの気になるニュースを持ち寄ってみました！ はじめに React Native Advent Calendar 2020 TECH STAND #2 React Native にLT登壇しました Flutter がWindowsデスクトップアプリに対応へ Wix Multi-Module architecture for React Native Base Web: Uberが開発したWeb ReactのUIフレームワーク React Server Components React Native 2020年の振り返り RN アプ…

経験は何よりも饒舌•2 か月前

Reactのコードを読む(3)

前回はhello worldが描写されるところまでをみたので、今回はuseStateをみていこうと思う。wafuwafu13.hatenadiary.comまずは、useStateがどこで定義されているのかを確認する。 <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> …

masalibの日記•2 か月前

React Firebase入門　Realtime Databaseでchatアプリ（一覧）

Firebase Realtime Databaseを使ってChatのアプリを作りたいと思います 書き込みよりも難しいのは一覧取得でした。 この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp 1-1-2・ 「react-hook-form」を入れてみた 1-1-3・ AuthのSignUpの通信エラー対応 1-2 ・ FirebaseAuthのログイン処理 1-3 ・ FirebaseAuthのログイン認証とログアウト処理 1-4 ・ FirebaseAuthのパスワード初期化処理 1-5 ・ Firebase…

present•2 か月前

React Router の Link と Material-UI の ListItem を組み合わせる

Material-UI と React Router を使う SPA で、必ずと言って良いほど書いているので、いい加減メモしておく。 import React from 'react'; import { NavLink as RouterLink, NavLinkProps as RouterLinkProps, useLocation, } from 'react-router-dom'; import { Omit } from '@material-ui/types'; import { ListItem, ListItemIcon, ListItemText, } from '@ma…

UGA Boxxx•2 か月前

【React】useCallbackの落とし穴

2秒ごとにカウンタをインクリメントするカウンターアプリを例にuseCallbackの落とし穴について教えてもらった 例とするカウンターアプリの機能 ・2秒ごとにカウンタをインクリメントする ・リセットボタンが押されたら ・カウンタを0にする ・インターバルをリスタートする サンプル実装 export default function App() { const { count, onReset } = useCounter(); return ( <div className="App"> <h1>{count}</h1> <button onClick={onReset}>Reset</bu…

UGA Boxxx•2 か月前

【React】useCallbackの無駄遣い

以前、useCallbackについて調べた uga-box.hatenablog.com ただ、このとき メモ化されたコンポーネント（不必要なレンダーを避けるために参照の同一性を見るよう最適化されたコンポーネント）にコールバックを渡す場合に便利 という部分がよく理解できていなかった そんなとき、関数オブジェクトの話を聞いて少し理解ができたのでまとめておく useCallback単体で使っても意味がない まず、useCallbackの第一引数をインライン関数で定義しておけば、関数定義を省略できるかとういうと、そういうわけではない useCallbackを使った下のコードは const onCli…

強まっていこう•3 か月前

Redux と React hooks どっち使ったら幸せになれるの？

結論としては React を使わない事が一番の幸せへの道。React ファンボーイはそっ閉じの方向で、以下読むべからず。簡単なものを作るのにもアホほど時間がかかるので膨大な予算が無駄に取れる贅沢プロジェクトで暇つぶししたい場合のみに使うと良い。表示速度を上げるにもアホほど労力と精神力と工数を吸い取られ続けるし、大人数でやればやるほどダメになり表示速度と開発速度が共に劇的に遅くなって行く。そもそもこんなもの Facebook みたいに1画面で多人数から飛んでくるデータをビシバシ表示していろんなやり取りするものの為に作られたのであって、そんなイカツイウェブアプリを作らなきゃならない状況が一般企業に…