トップ React.jsに関する質問 Reactのコンポーネントの不必要な再レンダリングを防止したい

編集履歴

質問編集履歴

2026/02/23 07:16

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -284,7 +284,6 @@
 # 試したこと6
 「試したこと5」の `memo` を利用する必要がないことに気付いたので修正しました。
 ```tsx
 import { useState } from 'react'
@@ -324,6 +323,7 @@
 # 試したこと7
 handleChangeName と handleChangePassword を共通化しました。
+name の指定が少し長くなっていますが型安全の為です。仕方ないです。
 ```tsx
 import { useState } from 'react'
@@ -334,6 +334,8 @@
     password: ''
   })
+  type FormKeys = keyof typeof form
   function handleSubmit(e: React.SubmitEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -348,10 +350,10 @@
   return (
     <form onSubmit={handleSubmit}>
       <div>
-        <input name={"name" satisfies keyof typeof form} value={form.name} onChange={handleChange} />
+        <input name={"name" satisfies FormKeys} value={form.name} onChange={handleChange} />
       </div>
       <div>
-        <input name={"password" satisfies keyof typeof form} value={form.password} onChange={handleChange} />
+        <input name={"password" satisfies FormKeys} value={form.password} onChange={handleChange} />
       </div>
       <input type="submit" />

React.js

2026/02/23 07:09

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -348,10 +348,10 @@
   return (
     <form onSubmit={handleSubmit}>
       <div>
-        <input name="name" value={form.name} onChange={handleChange} />
+        <input name={"name" satisfies keyof typeof form} value={form.name} onChange={handleChange} />
       </div>
       <div>
-        <input name="password" value={form.password} onChange={handleChange} />
+        <input name={"password" satisfies keyof typeof form} value={form.password} onChange={handleChange} />
       </div>
       <input type="submit" />

React.js

2026/02/23 07:03

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -236,8 +236,129 @@
     </form>
   )
 }
+```
+# 試したこと5
+setValue に直接 setter を指定して「試したこと3」を改良しました。
+関数オブジェクトが再生成されないようになりました。
+```tsx
+import { memo, useState } from 'react'
+interface Props {
+  value: string
+  setValue: (value: string) => void
+}
+function Input(props: Props) {
+  return (
+    <div>
+      <input value={props.value} onChange={(e) => props.setValue(e.target.value)} />
+    </div>
+  )
+}
+const MemoInput = memo(Input)
+export default function App() {
+  const [name, setName] = useState('')
+  const [password, setPassword] = useState('')
+  function handleSubmit(e: React.SubmitEvent<HTMLFormElement>) {
+    e.preventDefault()
+    console.log(`name is ${name}`)
+    console.log(`password is ${password}`)
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <MemoInput value={name} setValue={setName} />
+      <MemoInput value={password} setValue={setPassword} />
+      <input type="submit" />
+    </form>
+  )
+}
 ```
+# 試したこと6
+「試したこと5」の `memo` を利用する必要がないことに気付いたので修正しました。
+```tsx
+import { useState } from 'react'
+export default function App() {
+  const [name, setName] = useState('')
+  const [password, setPassword] = useState('')
+  function handleSubmit(e: React.SubmitEvent<HTMLFormElement>) {
+    e.preventDefault()
+    console.log(`name is ${name}`)
+    console.log(`password is ${password}`)
+  }
+  function handleChangeName(e: React.ChangeEvent<HTMLInputElement>) {
+    setName(e.target.value)
+  }
+  function handleChangePassword(e: React.ChangeEvent<HTMLInputElement>) {
+    setPassword(e.target.value)
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <input name="name" value={name} onChange={handleChangeName} />
+      </div>
+      <div>
+        <input name="password" value={password} onChange={handleChangePassword} />
+      </div>
+      <input type="submit" />
+    </form>
+  )
+}
+```
+# 試したこと7
+handleChangeName と handleChangePassword を共通化しました。
+```tsx
+import { useState } from 'react'
+export default function App() {
+  const [form, setForm] = useState({
+    name: '',
+    password: ''
+  })
+  function handleSubmit(e: React.SubmitEvent<HTMLFormElement>) {
+    e.preventDefault()
+    console.log(`name is ${form.name}`)
+    console.log(`password is ${form.password}`)
+  }
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setForm({ ...form, [e.target.name]: e.target.value })
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <input name="name" value={form.name} onChange={handleChange} />
+      </div>
+      <div>
+        <input name="password" value={form.password} onChange={handleChange} />
+      </div>
+      <input type="submit" />
+    </form>
+  )
+}
+```
 ### 補足情報（FW/ツールのバージョンなど）
 - React 19.2.4

React.js

2026/02/21 13:58

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -177,7 +177,7 @@
 ### 試したこと4
 `useCallback` を利用して「試したこと3」を改良しました。
 値を変更すると「AppとNameInput」または「AppとPasswordInput」のように個別にレンダリングできるようになりました。
-Appが再レンダリングされる事は useState が存在するので仕方ないようです。
+Appが再レンダリングされる事は App 内に useState が存在するので仕方ないようです。
 しかし、たった2つのinputですが、これだけ大量のコードを書かなくてはいけないのでしょうか？
 とても大変です。なにか良い方法はないですか？

React.js

2026/02/21 13:40

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -176,7 +176,7 @@
 ### 試したこと4
 `useCallback` を利用して「試したこと3」を改良しました。
-値を変更すると「AppとNameInput」または「AppとPasswordInput」のように個別にレンダリングできるように鳴りました。
+値を変更すると「AppとNameInput」または「AppとPasswordInput」のように個別にレンダリングできるようになりました。
 Appが再レンダリングされる事は useState が存在するので仕方ないようです。
 しかし、たった2つのinputですが、これだけ大量のコードを書かなくてはいけないのでしょうか？
 とても大変です。なにか良い方法はないですか？

React.js

2026/02/21 13:39

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -174,5 +174,70 @@
 }
 ```
+### 試したこと4
+`useCallback` を利用して「試したこと3」を改良しました。
+値を変更すると「AppとNameInput」または「AppとPasswordInput」のように個別にレンダリングできるように鳴りました。
+Appが再レンダリングされる事は useState が存在するので仕方ないようです。
+しかし、たった2つのinputですが、これだけ大量のコードを書かなくてはいけないのでしょうか？
+とても大変です。なにか良い方法はないですか？
+```tsx
+import { memo, useCallback, useState } from 'react'
+interface Props {
+  value: string
+  setValue: (value: string) => void
+}
+function NameInput(props: Props) {
+  return (
+    <div>
+      <input name="name" value={props.value} onChange={(e) => props.setValue(e.target.value)} />
+    </div>
+  )
+}
+function PasswordInput(props: Props) {
+  return (
+    <div>
+      <input name="password" value={props.value} onChange={(e) => props.setValue(e.target.value)} />
+    </div>
+  )
+}
+const MemoNameInput = memo(NameInput)
+const MemoPasswordInput = memo(PasswordInput)
+export default function App() {
+  const [name, setName] = useState('')
+  const [password, setPassword] = useState('')
+  function handleSubmit(e: React.SubmitEvent<HTMLFormElement>) {
+    e.preventDefault()
+    console.log(`name is ${name}`)
+    console.log(`password is ${password}`)
+  }
+  const handleSetName = useCallback((value: string) => {
+    setName(value)
+  }, [])
+  const handleSetPassword = useCallback((value: string) => {
+    setPassword(value)
+  }, [])
+  return (
+    <form onSubmit={handleSubmit}>
+      <MemoNameInput value={name} setValue={handleSetName} />
+      <MemoPasswordInput value={password} setValue={handleSetPassword} />
+      <input type="submit" />
+    </form>
+  )
+}
+```
 ### 補足情報（FW/ツールのバージョンなど）
 - React 19.2.4

React.js

2026/02/21 13:16

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

	@@ -1,1 +1,1 @@
1	- Reactのコンポーネントの再レンダリングを防止したい
1	+ Reactのコンポーネントの不必要な再レンダリングを防止したい

body CHANGED Viewed

@@ -1,5 +1,5 @@
 ### 実現したいこと
-Reactのコンポーネントの再レンダリングを防止したいです。
+Reactのコンポーネントの不必要な再レンダリングを防止したいです。
 ### 発生している問題
 name, password どちらか1文字でも値を変更するとApp自体が再レンダリングされてしまいます。

React.js

あ

2026/02/21 12:28

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -89,6 +89,7 @@
 useState が原因で再レンダリングされているので、そもそも useState を利用しないようにしました。
 handleSubmit で name, password の値が取得できていますが React として適切な書き方なのかが疑問です。
 どちらかというと今までの古き良きHTML + JavaScriptのような書き方を彷彿とさせます。
+この書き方で問題ないならそもそも useState の存在理由も疑問に思えてきます。
 また、useEffect であればエディタの名前変更機能を利用すれば自動的に全ての変数名が変更されますが、FormDataの場合は必ず手動でname属性と formData.get を修正する必要があります。
 フォームが複雑になると人為的ミスをする可能性も出てくるので避けたいです。

React.js

2026/02/21 12:27

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -4,7 +4,7 @@
 ### 発生している問題
 name, password どちらか1文字でも値を変更するとApp自体が再レンダリングされてしまいます。
-Reactの再レンダリングが発生しているかは [React Developer Tools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) を利用して視覚的に確認しています。
+Reactのコンポーネントの再レンダリングが発生しているかは [React Developer Tools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) を利用して視覚的に確認しています。
 ![](https://ddjkaamml8q8x.cloudfront.net/questions/2026-02-21/df896276-3368-4caa-9487-4c3fbed55917.png)

React.js

2026/02/21 12:26

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

	@@ -1,1 +1,1 @@
1	- Reactの再レンダリングを防止したい
1	+ Reactのコンポーネントの再レンダリングを防止したい

body CHANGED Viewed

@@ -1,5 +1,5 @@
 ### 実現したいこと
-Reactの再レンダリングを防止したいです。
+Reactのコンポーネントの再レンダリングを防止したいです。
 ### 発生している問題
 name, password どちらか1文字でも値を変更するとApp自体が再レンダリングされてしまいます。

React.js

2026/02/21 12:25

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -121,5 +121,57 @@
 }
 ```
+### 試したこと3
+`memo` を利用してメモ化しましたが name, password どちらか1方を変更すると、どちらも再レンダリングされてしまいます。
+```tsx
+import { memo, useState } from 'react'
+interface Props {
+  value: string
+  setValue: (value: string) => void
+}
+function NameInput(props: Props) {
+  return (
+    <div>
+      <input name="name" value={props.value} onChange={(e) => props.setValue(e.target.value)} />
+    </div>
+  )
+}
+function PasswordInput(props: Props) {
+  return (
+    <div>
+      <input name="password" value={props.value} onChange={(e) => props.setValue(e.target.value)} />
+    </div>
+  )
+}
+const MemoNameInput = memo(NameInput)
+const MemoPasswordInput = memo(PasswordInput)
+export default function App() {
+  const [name, setName] = useState('')
+  const [password, setPassword] = useState('')
+  function handleSubmit(e: React.SubmitEvent<HTMLFormElement>) {
+    e.preventDefault()
+    console.log(`name is ${name}`)
+    console.log(`password is ${password}`)
+  }
+  return (
+    <form onSubmit={handleSubmit}>
+      <MemoNameInput value={name} setValue={(value) => { setName(value) }} />
+      <MemoPasswordInput value={password} setValue={(value) => { setPassword(value) }} />
+      <input type="submit" />
+    </form>
+  )
+}
+```
 ### 補足情報（FW/ツールのバージョンなど）
 - React 19.2.4

React.js

2026/02/21 12:18

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -90,7 +90,7 @@
 handleSubmit で name, password の値が取得できていますが React として適切な書き方なのかが疑問です。
 どちらかというと今までの古き良きHTML + JavaScriptのような書き方を彷彿とさせます。
-また、useEffect であればエディタの名前変更機能を利用すれば自動的に全ての変数名が変更されますが、FormDataの場合は必ず手動でname属性と formData.get を修正しなければいけません。
+また、useEffect であればエディタの名前変更機能を利用すれば自動的に全ての変数名が変更されますが、FormDataの場合は必ず手動でname属性と formData.get を修正する必要があります。
 フォームが複雑になると人為的ミスをする可能性も出てくるので避けたいです。
 ```tsx

React.js

2026/02/21 12:17

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -118,10 +118,6 @@
       <input type="submit" />
     </form>
   )
-}s
-      <input type="submit" />
-    </form>
-  )
 }
 ```

React.js

2026/02/21 12:17

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -41,7 +41,7 @@
 ### 試したこと1
 以下のように NameInput と PasswordInput に別けました。
-コンポーネントごとの再レンダリングなので期待する結果になりました。
+コンポーネントごとの最小限の再レンダリングなので期待する結果になりました。
 しかし、 handleSubmit で name と password が取得できなくなりました。
 ```tsx

React.js

2026/02/21 12:16

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -41,6 +41,7 @@
 ### 試したこと1
 以下のように NameInput と PasswordInput に別けました。
+コンポーネントごとの再レンダリングなので期待する結果になりました。
 しかし、 handleSubmit で name と password が取得できなくなりました。
 ```tsx

React.js

2026/02/21 12:15

投稿

vj2a6wk5

スコア22

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -4,6 +4,10 @@
 ### 発生している問題
 name, password どちらか1文字でも値を変更するとApp自体が再レンダリングされてしまいます。
+Reactの再レンダリングが発生しているかは [React Developer Tools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) を利用して視覚的に確認しています。
+![](https://ddjkaamml8q8x.cloudfront.net/questions/2026-02-21/df896276-3368-4caa-9487-4c3fbed55917.png)
 ### 該当のソースコード
 ```jsx
 import { useState } from 'react'

React.js