経緯 ESLintのuseEffect has amissing dependencyというwarningを放置したままpushしたら Netlifyの自動デプロイに失敗していた 原因 useEffect内で依存関係のある変数を使用 かつ useEffectの第二引数が空配列の場合 解決方法 依存関係を解消する(dependenc…

原因： create-react-appで作成したアプリのindex.tsxが使用しているの機能意図しない副作用の検出のためにコンポーネントを2度呼ぶようにしている。 ja.reactjs.orgStrictModeの利点： 安全でないライフサイクルの特定 レガシーな文字列 ref API の使用に対…

1.ページ切替の際にサーバにリクエストが飛ばないためアクセス解析が困難 ソリューションとしては、 URLが書き変わる際にEffect Hookでアクセス解析(Google Analytics等)にリクエストを発行する処理を差し込む必要がある 2.サーバがHTTPステータスコードを返…

概要 btoa()およびatob()はMDNにおいて非推奨 ASCII文字列しか対応していないため引数に日本語を与えたりするとエラーになるdeveloper.mozilla.org 対策 input属性のフォームから受け取った値をエンコード/デコードして返すサンプル as-is import React, { u…

メジャーどころのレンダラーとその概要まとめ 名称 概要 React DOM HTML DOM(公式標準パッケージ) react-test-renderer JavaScript オブジェクト（公式標準パッケージ) React ART HTML5 Canvas や SVG などのベクターグラフィック（公式標準パッケージ） Rea…

step1 stateの定義をする import React from 'react'; class App extends React.Component { constructor(props) { super(props); // stateをオブジェクトの形で定義する this.state = {name:'g0'} } step2 stateの表示をする import React from 'react'; cl…