{"id":1903,"date":"2025-10-19T09:34:01","date_gmt":"2025-10-19T00:34:01","guid":{"rendered":"https:\/\/route-zero.com\/recruit\/?post_type=route&#038;p=1903"},"modified":"2026-02-19T09:34:11","modified_gmt":"2026-02-19T00:34:11","slug":"react-useeffect%e3%81%ae%e3%83%a1%e3%83%a2%e3%83%aa%e3%83%aa%e3%83%bc%e3%82%af%e5%af%be%e7%ad%967%e9%81%b8%ef%bd%9c%e4%bb%8a%e3%81%99%e3%81%90%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%af%e3%83%aa%e3%83%bc","status":"publish","type":"route","link":"https:\/\/route-zero.com\/recruit\/route\/1903\/","title":{"rendered":"React useEffect\u306e\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u5bfe\u7b567\u9078\uff5c\u4eca\u3059\u3050\u4f7f\u3048\u308b\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u95a2\u6570\u96c6"},"content":{"rendered":"<div>\n<p>\n    \u300c\u753b\u9762\u9077\u79fb\u3092\u7e70\u308a\u8fd4\u3059\u3068\u3001\u30a2\u30d7\u30ea\u304c\u91cd\u304f\u306a\u308b\u2026\u300d\u300c<strong>memory leak warning<\/strong>\u304c\u6d88\u3048\u306a\u3044\u2026\u300d<br \/>\n    <strong>\u3053\u3093\u306a\u60a9\u307f\u3001\u79c1\u305f\u3061\u3082\u4f55\u5ea6\u3082\u7d4c\u9a13\u3057\u307e\u3057\u305f\u3002<\/strong><br \/>\n    \u3067\u3082\u3001<strong>React\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u7406\u8ad6<\/strong>\u3092\u6df1\u6398\u308a\u3059\u308b\u524d\u306b\u3001\u307e\u305a\u306f\u300c\u6b63\u3057\u3044\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u306e\u66f8\u304d\u65b9\u300d\u3092\u77e5\u308a\u3001\u76ee\u306e\u524d\u306e\u8b66\u544a\u3092\u30b5\u30af\u30c3\u3068\u89e3\u6d88\u3057\u305f\u3044\u2015\u2015\u305d\u3093\u306a\u73fe\u5834\u76ee\u7dda\u3067\u3001<strong>\u5b9f\u52d9\u306b\u52b9\u304f\u30d1\u30bf\u30fc\u30f3\u96c6<\/strong>\u3092\u307e\u3068\u3081\u307e\u3057\u305f\u3002\n  <\/p>\n<blockquote>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1aReact<\/strong><br \/>\n      Facebook\u304c\u958b\u767a\u3057\u305f\u3001UI\u69cb\u7bc9\u306e\u305f\u3081\u306eJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5358\u4f4d\u3067Web\u30a2\u30d7\u30ea\u3092\u52b9\u7387\u7684\u306b\u958b\u767a\u3067\u304d\u308b\u3002\n    <\/p>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1auseEffect<\/strong><br \/>\n      React\u306e\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u526f\u4f5c\u7528\uff08\u30c7\u30fc\u30bf\u53d6\u5f97\u3084\u30a4\u30d9\u30f3\u30c8\u767b\u9332\u306a\u3069\uff09\u3092\u6271\u3046\u305f\u3081\u306e\u30d5\u30c3\u30af\u3002\u4f9d\u5b58\u914d\u5217\u3067\u5b9f\u884c\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u5236\u5fa1\u3067\u304d\u308b\u3002\n    <\/p>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb<\/strong><br \/>\n      \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u751f\u6210\u30fb\u66f4\u65b0\u30fb\u7834\u68c4\u3055\u308c\u308b\u4e00\u9023\u306e\u6d41\u308c\u3002React\u3067\u306f\u30de\u30a6\u30f3\u30c8\u30fb\u66f4\u65b0\u30fb\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u306e\u5404\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u51e6\u7406\u3092\u631f\u3081\u308b\u3002\n    <\/p>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u95a2\u6570<\/strong><br \/>\n      useEffect\u5185\u3067return\u3059\u308b\u3053\u3068\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u6642\u3084\u526f\u4f5c\u7528\u306e\u518d\u5b9f\u884c\u524d\u306b\u5b9f\u884c\u3055\u308c\u308b\u5f8c\u7247\u4ed8\u3051\u7528\u306e\u95a2\u6570\u3002\n    <\/p>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u30e1\u30e2\u30ea\u30ea\u30fc\u30af<\/strong><br \/>\n      \u672c\u6765\u89e3\u653e\u3055\u308c\u308b\u3079\u304d\u30e1\u30e2\u30ea\u304c\u4e0d\u8981\u306a\u53c2\u7167\u3084\u89e3\u9664\u6f0f\u308c\u3067\u6b8b\u308a\u7d9a\u3051\u3001\u30a2\u30d7\u30ea\u306e\u52d5\u4f5c\u304c\u91cd\u304f\u306a\u308b\u73fe\u8c61\u3002\n    <\/p>\n<\/blockquote>\n<p>\n    \uff08React\u306e\u57fa\u672c\u3084useState\u3068\u306e\u9055\u3044\u306b\u3064\u3044\u3066\u306f\u300e<a href=\"https:\/\/route-zero.com\/recruit\/route\/1229\/\" target=\"_blank\" rel=\"noopener\">\u3010\u4fdd\u5b58\u7248\u3011React\u306euseState\u3068useEffect\u306e\u9055\u3044\u3068\u306f\uff1f\u521d\u5fc3\u8005\u304c\u5b9f\u52d9\u3067\u8ff7\u308f\u306a\u3044\u4f7f\u3044\u5206\u3051\u5b8c\u5168\u30ac\u30a4\u30c9<\/a\n    >\u300f\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\uff09\n  <\/p>\n<p><\/p>\n<hr \/>\n<h2>1. \u307e\u305a\u306f\u6bd4\u8f03\uff01\u30bf\u30a4\u30de\u30fc\u304c\u6b62\u307e\u3089\u306a\u3044\u5931\u6557\u4f8b\u3068\u6210\u529f\u4f8b<\/h2>\n<p>\n    \u300c\u306a\u305c\u304b\u30bf\u30a4\u30de\u30fc\u304c\u6b62\u307e\u3089\u306a\u3044\u2026\u300d<br \/>\n    <strong>\u305d\u306e\u539f\u56e0\u3001\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u95a2\u6570\u306e\u66f8\u304d\u5fd8\u308c\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/strong>\n  <\/p>\n<pre><code >\r\n\/\/ &#x274c; \u30bf\u30a4\u30de\u30fc\u304c\u6b62\u307e\u3089\u306a\u3044\u5931\u6557\u4f8b\r\nimport React, { useEffect, useState } from 'react';\r\n\r\nfunction BadTimerComponent() {\r\n  const [count, setCount] = useState(0);\r\n  useEffect(() => {\r\n    setInterval(() => {\r\n      setCount(prevCount => prevCount + 1);\r\n    }, 1000);\r\n  }, []); \/\/ \u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u304c\u306a\u3044\u305f\u3081\u3001\u30bf\u30a4\u30de\u30fc\u304c\u6b8b\u308a\u7d9a\u3051\u308b\r\n  return (\r\n    &lt;div&gt;\r\n      &lt;h2&gt;&#x274c; Bad Timer&lt;\/h2&gt;\r\n      &lt;p&gt;Count: {count}&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\n\/\/ &#x2705; \u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u3067\u30bf\u30a4\u30de\u30fc\u3092\u6b62\u3081\u308b\u6210\u529f\u4f8b\r\nimport React, { useEffect, useState } from 'react';\r\n\r\nfunction GoodTimerComponent() {\r\n  const [count, setCount] = useState(0);\r\n  useEffect(() => {\r\n    const intervalId = setInterval(() => {\r\n      setCount(prevCount => prevCount + 1);\r\n    }, 1000);\r\n    return () => {\r\n      clearInterval(intervalId); \/\/ &#x2705; \u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u6642\u306b\u30bf\u30a4\u30de\u30fc\u3092\u505c\u6b62\r\n    };\r\n  }, []);\r\n  return (\r\n    &lt;div&gt;\r\n      &lt;h2&gt;&#x2705; Good Timer&lt;\/h2&gt;\r\n      &lt;p&gt;Count: {count}&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n  <\/code><\/pre>\n<p>\u307e\u305a\u306f\u3053\u306e\u9055\u3044\u3092\u62bc\u3055\u3048\u307e\u3057\u3087\u3046\u3002<\/p>\n<hr \/>\n<h2>2. React useEffect\u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u306e\u300c\u306a\u305c\uff1f\u300d\u3068\u30ea\u30b9\u30af<\/h2>\n<p>\n    <strong>\u30e1\u30e2\u30ea\u30ea\u30fc\u30af<\/strong>\u2015\u2015<br \/>\n    \u305d\u308c\u306f\u3001<strong>\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc<\/strong>\u3084<strong>\u30bf\u30a4\u30de\u30fc<\/strong>\u3001<strong>\u975e\u540c\u671f\u51e6\u7406<\/strong>\u306e\u89e3\u9664\u5fd8\u308c\u304c\u4e3b\u306a\u539f\u56e0\u3067\u3059\u3002\n  <\/p>\n<ul>\n<li>\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306e\u89e3\u9664\u6f0f\u308c<\/li>\n<li>\u30bf\u30a4\u30de\u30fc\u306e\u505c\u6b62\u5fd8\u308c<\/li>\n<li>\u975e\u540c\u671f\u51e6\u7406\u306e\u30ad\u30e3\u30f3\u30bb\u30eb\u6f0f\u308c<\/li>\n<\/ul>\n<p>\n    \u3053\u308c\u3089\u304c\u6b8b\u308b\u3068\u3001<br \/>\n    <strong>\u4e0d\u8981\u306a\u30e1\u30e2\u30ea\u6d88\u8cbb\u3084\u300c\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u5f8c\u306e\u72b6\u614b\u66f4\u65b0\u300d\u8b66\u544a<\/strong>\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002<br \/>\n    \u653e\u7f6e\u3059\u308b\u3068\u3001\u30a2\u30d7\u30ea\u306e\u52d5\u4f5c\u304c\u91cd\u304f\u306a\u308a\u3001\u30d0\u30b0\u306e\u6e29\u5e8a\u306b\u3082\u3002<br \/>\n    <strong>\u79c1\u305f\u3061\u304c\u3088\u304f\u30cf\u30de\u308b\u201c\u843d\u3068\u3057\u7a74\u201d<\/strong>\u3067\u3059\u3002\n  <\/p>\n<blockquote>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc<\/strong><br \/>\n      \u30e6\u30fc\u30b6\u30fc\u306e\u64cd\u4f5c\uff08\u30af\u30ea\u30c3\u30af\u3084\u30b9\u30af\u30ed\u30fc\u30eb\u306a\u3069\uff09\u3092\u691c\u77e5\u3057\u3001\u51e6\u7406\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306e\u4ed5\u7d44\u307f\u3002addEventListener\u3067\u767b\u9332\u3057\u3001removeEventListener\u3067\u89e3\u9664\u3059\u308b\u3002\n    <\/p>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u30bf\u30a4\u30de\u30fc\uff08setTimeout\/setInterval\uff09<\/strong><br \/>\n      \u4e00\u5b9a\u6642\u9593\u5f8c\u3084\u4e00\u5b9a\u9593\u9694\u3067\u51e6\u7406\u3092\u5b9f\u884c\u3059\u308bJavaScript\u306e\u4ed5\u7d44\u307f\u3002clearTimeout\/clearInterval\u3067\u89e3\u9664\u3067\u304d\u308b\u3002\n    <\/p>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u975e\u540c\u671f\u51e6\u7406<\/strong><br \/>\n      API\u901a\u4fe1\u3084\u30bf\u30a4\u30de\u30fc\u306a\u3069\u3001\u51e6\u7406\u306e\u5b8c\u4e86\u3092\u5f85\u305f\u305a\u306b\u6b21\u306e\u51e6\u7406\u3092\u9032\u3081\u308b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u624b\u6cd5\u3002Promise\u3084async\/await\u3067\u8a18\u8ff0\u3059\u308b\u3002\n    <\/p>\n<\/blockquote>\n<hr \/>\n<h2>3. \u30b3\u30d4\u30daOK\uff01useEffect\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u95a2\u6570\u306e\u6b63\u3057\u3044\u66f8\u304d\u65b9\u30d1\u30bf\u30fc\u30f3\u96c6<\/h2>\n<h3>\uff081\uff09\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306e\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7<\/h3>\n<pre><code >\r\n\/\/ \u57fa\u672c\u30d1\u30bf\u30fc\u30f3\r\nimport React, { useEffect } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const handleScroll = () => console.log('Scrolled!');\r\n  useEffect(() => {\r\n    window.addEventListener('scroll', handleScroll);\r\n    return () => window.removeEventListener('scroll', handleScroll);\r\n  }, []);\r\n  return &lt;div&gt;\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044&lt;\/div&gt;;\r\n}\r\n\r\n\/\/ \u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u5316\r\nfunction useEventListener(eventType, handler, element = window) {\r\n  useEffect(() => {\r\n    element.addEventListener(eventType, handler);\r\n    return () => element.removeEventListener(eventType, handler);\r\n  }, [eventType, handler, element]);\r\n}\r\n  <\/code><\/pre>\n<h3>\uff082\uff09\u30bf\u30a4\u30de\u30fc\uff08setTimeout, setInterval\uff09\u306e\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7<\/h3>\n<pre><code >\r\n\/\/ setTimeout\r\nimport React, { useEffect, useState } from 'react';\r\n\r\nfunction TimeoutComponent() {\r\n  const [message, setMessage] = useState('...');\r\n  useEffect(() => {\r\n    const timerId = setTimeout(() => setMessage('2\u79d2\u5f8c\u306b\u8868\u793a\uff01'), 2000);\r\n    return () => clearTimeout(timerId);\r\n  }, []);\r\n  return &lt;div&gt;{message}&lt;\/div&gt;;\r\n}\r\n\r\n\/\/ setInterval\r\nfunction IntervalWithStateComponent() {\r\n  const [count, setCount] = useState(0);\r\n  useEffect(() => {\r\n    const intervalId = setInterval(() => {\r\n      setCount(prevCount => prevCount + 1);\r\n    }, 1000);\r\n    return () => clearInterval(intervalId);\r\n  }, []);\r\n  return &lt;p&gt;Count: {count}&lt;\/p&gt;;\r\n}\r\n  <\/code><\/pre>\n<p>\n    \uff08JavaScript\u306e\u30bf\u30a4\u30de\u30fc\u3084\u975e\u540c\u671f\u51e6\u7406\u306e\u57fa\u790e\u306b\u3064\u3044\u3066\u306f\u300e<a href=\"https:\/\/route-zero.com\/recruit\/route\/1212\/\" target=\"_blank\" rel=\"noopener\">\u975e\u540c\u671f\u51e6\u7406\u3068\u306f\uff1fJavaScript\u3068Java\u306e\u5b9f\u4f8b\u3067\u308f\u304b\u308b\u4f7f\u3044\u65b9\u30fb\u843d\u3068\u3057\u7a74\u30fb\u89e3\u6c7a\u6cd5<\/a\n    >\u300f\u3082\u53c2\u8003\u306b\u306a\u308a\u307e\u3059\uff09\n  <\/p>\n<h3>\uff083\uff09\u975e\u540c\u671f\u51e6\u7406\u306e\u30ad\u30e3\u30f3\u30bb\u30eb\u3068AbortController<\/h3>\n<pre><code >\r\nimport React, { useEffect, useState } from 'react';\r\n\r\nfunction DataFetcherComponent() {\r\n  const [data, setData] = useState(null);\r\n  useEffect(() => {\r\n    const abortController = new AbortController();\r\n    const signal = abortController.signal;\r\n\r\n    fetch('https:\/\/api.example.com\/data', { signal })\r\n      .then(response => response.json())\r\n      .then(json => {\r\n        if (!signal.aborted) setData(json);\r\n      })\r\n      .catch(e => {\r\n        if (e.name !== 'AbortError') console.error(e);\r\n      });\r\n\r\n    return () => abortController.abort();\r\n  }, []);\r\n  return &lt;div&gt;Data: {JSON.stringify(data)}&lt;\/div&gt;;\r\n}\r\n  <\/code><\/pre>\n<blockquote>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1aAbortController<\/strong><br \/>\n      fetch\u306a\u3069\u306e\u975e\u540c\u671f\u901a\u4fe1\u3092\u9014\u4e2d\u3067\u30ad\u30e3\u30f3\u30bb\u30eb\u3067\u304d\u308b\u30d6\u30e9\u30a6\u30b6API\u3002signal\u3092\u6e21\u3057\u3066\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u7ba1\u7406\u3057\u3001abort()\u3067\u4e2d\u65ad\u3067\u304d\u308b\u3002\n    <\/p>\n<\/blockquote>\n<h3>\uff084\uff09\u30a2\u30f3\u30de\u30a6\u30f3\u30c8\u5f8c\u306esetState\u8b66\u544a\u3092\u56de\u907f<\/h3>\n<pre><code >\r\nimport React, { useEffect, useState, useRef } from 'react';\r\n\r\nfunction SafeAsyncUpdateComponent() {\r\n  const [data, setData] = useState(null);\r\n  const isMounted = useRef(true);\r\n\r\n  useEffect(() => {\r\n    isMounted.current = true;\r\n    const fetchData = async () => {\r\n      await new Promise(resolve => setTimeout(resolve, 1000));\r\n      if (isMounted.current) {\r\n        setData('\u30c7\u30fc\u30bf\u53d6\u5f97\u5b8c\u4e86\uff01');\r\n      }\r\n    };\r\n    fetchData();\r\n    return () => {\r\n      isMounted.current = false;\r\n    };\r\n  }, []);\r\n  return &lt;div&gt;{data || '\u30c7\u30fc\u30bf\u53d6\u5f97\u4e2d...'}&lt;\/div&gt;;\r\n}\r\n  <\/code><\/pre>\n<p>\u305c\u3072\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30da\u3057\u3066\u3001\u307e\u305a\u306f\u52d5\u304b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<hr \/>\n<h2>4. \u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u306e\u767a\u898b\u3068\u8a3a\u65ad\uff1aChrome DevTools\u6d3b\u7528\u8853<\/h2>\n<p>\n    <strong>\u5146\u5019\u3092\u898b\u9003\u3055\u306a\u3044<\/strong><br \/>\n    \u30fb\u300c<strong>Can&#8217;t perform a React state update on an unmounted component&#8230;<\/strong>\u300d\u8b66\u544a<br \/>\n    \u30fb\u30a2\u30d7\u30ea\u306e\u52d5\u4f5c\u304c\u5f90\u3005\u306b\u91cd\u304f\u306a\u308b\n  <\/p>\n<p>\n    <strong>Chrome DevTools\u3067\u306e\u624b\u9806<\/strong>\n  <\/p>\n<ol>\n<li>DevTools\u3092\u958b\u304d\u300cMemory\u300d\u30bf\u30d6\u3078<\/li>\n<li>\u300cHeap snapshot\u300d\u30922\u56de\u53d6\u5f97\u3057\u3001\u6bd4\u8f03<\/li>\n<li><strong>\u0394 Size<\/strong>\u304c\u5897\u3048\u7d9a\u3051\u308b\u9805\u76ee\uff08<strong>Detached DOM tree<\/strong>\u306a\u3069\uff09\u3092\u78ba\u8a8d<\/li>\n<li>\u4fdd\u6301\u5143\uff08Retainers\uff09\u3092\u305f\u3069\u308a\u3001\u30ea\u30fc\u30af\u5143\u3092\u7279\u5b9a<\/li>\n<\/ol>\n<p>\u3053\u306e\u6d41\u308c\u3067\u3001<strong>\u3069\u3053\u3067\u89e3\u9664\u6f0f\u308c\u304c\u8d77\u304d\u3066\u3044\u308b\u304b<\/strong>\u3092\u898b\u3064\u3051\u3089\u308c\u307e\u3059\u3002<\/p>\n<hr \/>\n<h2>5. useEffect\u3092\u6b63\u3057\u304f\u4f7f\u3046\u305f\u3081\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h2>\n<h3>\uff081\uff09\u4f9d\u5b58\u914d\u5217\u306e\u6700\u9069\u5316<\/h3>\n<ul>\n<li><strong>\u542b\u3081\u308b\u3079\u304d\u3082\u306e<\/strong>\uff1a\u526f\u4f5c\u7528\u306b\u5f71\u97ff\u3059\u308bprops, state, \u95a2\u6570<\/li>\n<li><strong>\u542b\u3081\u306a\u3044\u65b9\u304c\u3088\u3044\u3082\u306e<\/strong>\uff1a\u6bce\u56de\u65b0\u3057\u304f\u306a\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3084\u95a2\u6570\uff08<strong>useCallback<\/strong>\u3084<strong>useMemo<\/strong>\u3067\u30e1\u30e2\u5316\u63a8\u5968\uff09<\/li>\n<li><strong>\u7a7a\u914d\u5217<strong>[]<\/strong>\u306e\u610f\u56f3<\/strong>\uff1a\u30de\u30a6\u30f3\u30c8\u6642\u306e\u307f\u5b9f\u884c<\/li>\n<\/ul>\n<h3>\uff082\uff09ESLint\u306e\u6d3b\u7528<\/h3>\n<p><strong>eslint-plugin-react-hooks<\/strong>\u306e<strong>exhaustive-deps<\/strong>\u30eb\u30fc\u30eb\u3067\u3001\u4f9d\u5b58\u914d\u5217\u306e\u8a18\u8ff0\u6f0f\u308c\u3092\u81ea\u52d5\u691c\u51fa\uff01<\/p>\n<blockquote>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1aESLint<\/strong><br \/>\n      JavaScript\/TypeScript\u306e\u30b3\u30fc\u30c9\u54c1\u8cea\u3084\u30d0\u30b0\u3092\u81ea\u52d5\u691c\u51fa\u3059\u308b\u9759\u7684\u89e3\u6790\u30c4\u30fc\u30eb\u3002\u30eb\u30fc\u30eb\u3092\u8ffd\u52a0\u3057\u3066\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u306e\u54c1\u8cea\u3092\u4fdd\u3066\u308b\u3002\n    <\/p>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u4f9d\u5b58\u914d\u5217\uff08Dependency Array\uff09<\/strong><br \/>\n      useEffect\u306e\u7b2c2\u5f15\u6570\u3002\u3053\u3053\u306b\u6307\u5b9a\u3057\u305f\u5024\u304c\u5909\u5316\u3057\u305f\u3068\u304d\u3060\u3051\u526f\u4f5c\u7528\u304c\u518d\u5b9f\u884c\u3055\u308c\u308b\u3002\n    <\/p>\n<\/blockquote>\n<pre><code>\r\n\/\/ .eslintrc.json\r\n{\r\n  \"extends\": [\r\n    \"react-app\",\r\n    \"plugin:react-hooks\/recommended\"\r\n  ]\r\n}\r\n  <\/code><\/pre>\n<h3>\uff083\uff09\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3067DRY\u306a\u30b3\u30fc\u30c9\u3078<\/h3>\n<pre><code >\r\n\/\/ useTimeout \u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u4f8b\r\nimport { useEffect, useRef } from 'react';\r\n\r\nfunction useTimeout(callback, delay) {\r\n  const savedCallback = useRef();\r\n  useEffect(() => {\r\n    savedCallback.current = callback;\r\n  }, [callback]);\r\n  useEffect(() => {\r\n    if (delay !== null) {\r\n      const id = setTimeout(() => savedCallback.current(), delay);\r\n      return () => clearTimeout(id);\r\n    }\r\n  }, [delay]);\r\n}\r\n  <\/code><\/pre>\n<h3>\uff084\uff09TypeScript\u3067\u578b\u5b89\u5168\u306a\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7<\/h3>\n<p>\n    <strong>\u578b\u5b9a\u7fa9<\/strong>\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u8aa4\u3063\u305f\u5f15\u6570\u3084\u30d7\u30ed\u30d1\u30c6\u30a3\u30a2\u30af\u30bb\u30b9\u3092\u4e8b\u524d\u306b\u9632\u3052\u307e\u3059\u3002<br \/>\n    <strong>\u5805\u7262\u6027\u30a2\u30c3\u30d7\uff06\u30d0\u30b0\u6e1b\u5c11<\/strong>\u306b\u76f4\u7d50\u3057\u307e\u3059\u3002\n  <\/p>\n<blockquote>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1aTypeScript<\/strong><br \/>\n      JavaScript\u306b\u578b\u4ed8\u3051\u6a5f\u80fd\u3092\u52a0\u3048\u305f\u8a00\u8a9e\u3002\u578b\u5b89\u5168\u306b\u3088\u308a\u30d0\u30b0\u3092\u6e1b\u3089\u3057\u3001\u5927\u898f\u6a21\u958b\u767a\u3067\u3082\u5b89\u5fc3\u3057\u3066\u4f7f\u3048\u308b\u3002\n    <\/p>\n<p>\n      <strong>\u7528\u8a9e\u89e3\u8aac\uff1a\u578b\u5b89\u5168<\/strong><br \/>\n      \u5909\u6570\u3084\u95a2\u6570\u306e\u578b\u3092\u660e\u793a\u3059\u308b\u3053\u3068\u3067\u3001\u8aa4\u3063\u305f\u4f7f\u3044\u65b9\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u6642\u306b\u691c\u51fa\u3067\u304d\u308b\u4ed5\u7d44\u307f\u3002\n    <\/p>\n<\/blockquote>\n<p>\n    \uff08TypeScript\u306e\u5c0e\u5165\u3084\u578b\u5b9a\u7fa9\u306e\u5b9f\u8df5\u4f8b\u306f\u300e<a href=\"https:\/\/route-zero.com\/recruit\/route\/1291\" target=\"_blank\" rel=\"noopener\">TypeScript\u306e\u59cb\u3081\u65b9\uff5cNode.js\u3068VSCode\u3067\u5b66\u3076\u958b\u767a\u74b0\u5883\u69cb\u7bc9\u30ac\u30a4\u30c9\u3010\u521d\u5fc3\u8005\u5411\u3051\u5b8c\u5168\u89e3\u8aac\u3011<\/a\n    >\u300f\u3084\u300e<a href=\"https:\/\/route-zero.com\/recruit\/route\/1798\" target=\"_blank\" rel=\"noopener\">TypeScript Promise\u578b\u5b9a\u7fa9\u5b8c\u5168\u89e3\u8aac\uff5cany\u64b2\u6ec5\u3068\u4f7f\u3044\u5206\u3051<\/a>\u300f\u3082\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\uff09\n  <\/p>\n<h3>\uff085\uff09useEffect vs useLayoutEffect<\/h3>\n<ul>\n<li><strong>useEffect<\/strong>\uff1aDOM\u63cf\u753b\u5f8c\u306b\u975e\u540c\u671f\u3067\u5b9f\u884c\uff08\u57fa\u672c\u306f\u3053\u3061\u3089\uff09<\/li>\n<li><strong>useLayoutEffect<\/strong>\uff1aDOM\u63cf\u753b\u524d\u306b\u540c\u671f\u5b9f\u884c\uff08\u30ec\u30a4\u30a2\u30a6\u30c8\u8abf\u6574\u306a\u3069\u9650\u5b9a\u7684\u306b\uff09<\/li>\n<\/ul>\n<p>\n    <strong>\u91cd\u3044\u51e6\u7406\u306fuseEffect\u3067\u3002<\/strong><br \/>\n    \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u610f\u8b58\u3057\u3066\u4f7f\u3044\u5206\u3051\u307e\u3057\u3087\u3046\u3002\n  <\/p>\n<hr \/>\n<h2>6. \u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09<\/h2>\n<ul>\n<li>\n      <strong>Q1. \u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u95a2\u6570\u306f\u6bce\u56de\u66f8\u304f\u3079\u304d\uff1f<\/strong><br \/>\n      A. \u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3084\u30bf\u30a4\u30de\u30fc\u306a\u3069\u3001\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u5916\u3067\u7d9a\u304f\u526f\u4f5c\u7528\u306b\u306f\u5fc5\u9808\u3067\u3059\u3002\n    <\/li>\n<li>\n      <strong>Q2. \u4f9d\u5b58\u914d\u5217\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3084\u95a2\u6570\u3092\u542b\u3081\u308b\u3068\uff1f<\/strong><br \/>\n      A. \u7121\u9650\u30eb\u30fc\u30d7\u3084\u610f\u56f3\u3057\u306a\u3044\u518d\u5b9f\u884c\u306e\u539f\u56e0\u306b\u3002<strong>useCallback<\/strong>\u3084<strong>useMemo<\/strong>\u3067\u30e1\u30e2\u5316\u3092\u3002\n    <\/li>\n<li>\n      <strong>Q3. \u5916\u90e8\u30e9\u30a4\u30d6\u30e9\u30ea\u5229\u7528\u6642\u3082\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u306f\u5fc5\u8981\uff1f<\/strong><br \/>\n      A. \u306f\u3044\u3002<strong>destroy()<\/strong>\u306a\u3069\u306e\u7834\u68c4\u30e1\u30bd\u30c3\u30c9\u3092\u5fc5\u305a\u547c\u3073\u307e\u3057\u3087\u3046\u3002\n    <\/li>\n<li>\n      <strong>Q4. useEffect\u306e\u4ee3\u308f\u308a\u306buseMemo\u3084useCallback\u3067\u526f\u4f5c\u7528\u306f\uff1f<\/strong><br \/>\n      A. \u3067\u304d\u307e\u305b\u3093\u3002\u526f\u4f5c\u7528\u306b\u306f<strong>useEffect<\/strong>\u3092\u4f7f\u3044\u307e\u3057\u3087\u3046\u3002\n    <\/li>\n<li>\n      <strong>Q5. Strict Mode\u306e\u8b66\u544a\u306f\u672c\u756a\u3067\u3082\u767a\u751f\u3059\u308b\uff1f<\/strong><br \/>\n      A. \u306f\u3044\u3002\u8b66\u544a\u306f\u672c\u756a\u3067\u3082\u8d77\u3053\u308a\u5f97\u308b\u554f\u984c\u3067\u3059\u3002\u5fc5\u305a\u4fee\u6b63\u3092\u3002\n    <\/li>\n<li>\n      <strong>Q6. \u30e1\u30e2\u30ea\u30ea\u30fc\u30af\u5bfe\u7b56\u3067\u3069\u308c\u304f\u3089\u3044\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5411\u4e0a\uff1f<\/strong><br \/>\n      A. SPA\u306e\u753b\u9762\u9077\u79fb\u3084\u9577\u6642\u9593\u5229\u7528\u6642\u306e\u91cd\u3055\u304c\u5287\u7684\u306b\u6539\u5584\u3057\u307e\u3059\u3002\n    <\/li>\n<li>\n      <strong>Q7. Class Component\u3067\u3082\u540c\u3058\u5bfe\u7b56\u304c\u5fc5\u8981\uff1f<\/strong><br \/>\n      A. \u306f\u3044\u3002<strong>componentWillUnmount<\/strong>\u3067\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u3092\u3002\n    <\/li>\n<\/ul>\n<hr \/>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>\n    <strong>React useEffect\u306e\u30e1\u30e2\u30ea\u30ea\u30fc\u30af<\/strong>\u306f\u3001\u79c1\u305f\u3061\u201c\u30e2\u30c0\u30f3\u6311\u6226\u8005\u201d\u304c\u3088\u304f\u76f4\u9762\u3059\u308b\u8ab2\u984c\u3067\u3059\u3002<br \/>\n    \u3067\u3082\u3001<strong>\u6b63\u3057\u3044\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u30d1\u30bf\u30fc\u30f3<\/strong>\u3092\u77e5\u308c\u3070\u3001\u300c\u8b66\u544a\u30bc\u30ed\u300d\u300c\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\u300d\u3082\u5922\u3058\u3083\u3042\u308a\u307e\u305b\u3093\u3002\n  <\/p>\n<ul>\n<li>\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3084\u30bf\u30a4\u30de\u30fc\u306e\u89e3\u9664<\/li>\n<li>\u975e\u540c\u671f\u51e6\u7406\u306e\u30ad\u30e3\u30f3\u30bb\u30eb<\/li>\n<li>Chrome DevTools\u3084ESLint\u306e\u6d3b\u7528<\/li>\n<li>\u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u3084TypeScript\u3067\u306e\u5805\u7262\u5316<\/li>\n<\/ul>\n<p>\n    \u3053\u308c\u3089\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u3001<br \/>\n    <strong>DRY\u3067\u5805\u7262\u306aReact\u30a2\u30d7\u30ea\u958b\u767a<\/strong>\u3092\u4e00\u7dd2\u306b\u76ee\u6307\u3057\u307e\u3057\u3087\u3046\u3002\n  <\/p>\n<p><\/p>\n<p>\u305c\u3072\u624b\u5143\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3001\u4eca\u65e5\u304b\u3089\u5b9f\u8df5\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n<hr \/>\n<\/div>\n","protected":false},"featured_media":1904,"template":"","_links":{"self":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route\/1903"}],"collection":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route"}],"about":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/types\/route"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/media\/1904"}],"wp:attachment":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/media?parent=1903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}