レンダリングを最適化してWebパフォーマンスを向上させてみよう【React.memo/useMemo/useCallback入門】
#入門 #React #memo #hooks #useMemo #useCallback #プログラミング #独学 #webエンジニア #webアプリ開発
★参考文献
qiita.com/WebEngrChild/items/...
🌟Web開発案件も募集中です🌟
shincode-hp.pages.dev/for-bus...
Webの開発案件も募集しております。
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2021/12/31/udemy...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-5bc2.thinkific....
-------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・Reactにおけるレンダリングの仕組みが学べる
・React.memo/useMemo/useCallbackの意味と使い方が学べる
・不要なレンダリングを避け、webサイトのパフォーマンスを上げられる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ3000人突破
・Webアプリ/サイト開発数：200以上
・生きがい：プログラミングでサイトやアプリを作ること
★チャンネル登録はこちらから★
/ @user-hl9uv6cv7k
★今回のソースコード★
github.com/Shin-sibainu/useMe...
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。
Пікірлер: 9
useMemo等の使い方があまり理解できていなかったので、この動画はとてもありがたいです！
分かりやすっ
レンダリングにかかる時間を計測出来るのはうれしいですね 例えば、5ms以上かかっているものはmemo化する、みたいなルールをチームで共有しておけば、memo化するかしないかを個人の判断に任せなくてもよくなりそうです。
メガネなしの方が絶対いいと思います！
いつも動画楽しく拝見してます。 動画内10:10にて触れていたuseStateについてですが、 なぜuseStateらはssrでなくcsrにする必要があるのでしょうか？
@user-hl9uv6cv7k
9 ай бұрын
いつもご視聴ありがとうございます！ useState等のHooksはClient Componentでしか動作しないからですね。デフォルトではServerSide Componentで設定されているので"use client"としてClient Componentと認識してもらう必要があります。 useState等の操作はClient側で行われるものだからですね。
@user-ff6ym8ji8i
9 ай бұрын
ご回答ありがとうございます！とても勉強になりました！
ほんと値千金！