{"id":5896,"date":"2024-02-11T15:13:26","date_gmt":"2024-02-11T06:13:26","guid":{"rendered":"https:\/\/www.searchlight8.com\/?p=5896"},"modified":"2024-02-11T15:13:26","modified_gmt":"2024-02-11T06:13:26","slug":"react-usecallback-%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9up","status":"publish","type":"post","link":"https:\/\/www.searchlight8.com\/wp-searchlight8\/react-usecallback-%e3%83%91%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%b3%e3%82%b9up\/","title":{"rendered":"[React] useCallback \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9UP"},"content":{"rendered":"\n<p>ReactHook\u306euseCallback\u306f\u4e0d\u8981\u306a\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u9632\u3044\u3067\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u826f\u304f\u3059\u308b\u305f\u3081\u306e\u4ed5\u7d44\u307f\u3067useMemo\u3068\u4f3c\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>useMemo \u2192 \u95a2\u6570\u306e\u7d50\u679c\u3092\u30ad\u30e3\u30c3\u30b7\u30e5<\/li>\n\n\n\n<li>useCallback \u2192 \u95a2\u6570\u81ea\u4f53\u3092\u30ad\u30e3\u30c3\u30b7\u30e5<\/li>\n<\/ul>\n\n\n\n<p>\u4e0b\u8a18\u306e\u3088\u3046\u306a\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u4f5c\u6210\u3057\u3066useCallback\u306e\u50cd\u304d\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4e0a\u90e8\u306f\u30d7\u30e9\u30b9\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\uff11\u305a\u3064\u30ab\u30a6\u30f3\u30c8\u304cUP\u3057\u3001\u4e0b\u90e8\u306f\u30de\u30a4\u30ca\u30b9\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\uff11\u305a\u3064\u30ab\u30a6\u30f3\u30c8\u304cDown\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"422\" height=\"271\" src=\"https:\/\/www.searchlight8.com\/wp\/wp-content\/uploads\/2024\/02\/2024-02-11_13h31_06.png\" alt=\"\" class=\"wp-image-5904\" style=\"width:320px;height:auto\"\/><\/figure>\n\n\n\n<p>App.js\u306e\u4ed6\u306b\uff12\u3064\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f5c\u308a\u307e\u3059\u3002\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5024\u3092\u8868\u793a\u3055\u305b\u308b\u90e8\u5206\u3092\u62c5\u5f53\u3059\u308b\u300cCounterView\u300d\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u30dc\u30bf\u30f3\u3092\u62c5\u5f53\u3059\u308b\u300cCounterButton\u300d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>src\/App.js    \u4e3b\u306a\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u8a18\u8f09\u3002CounterView.js , CounterButton\u8aad\u8fbc<\/li>\n\n\n\n<li>src\/components\/CounterView   \u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5024\u3092\u8868\u793a<\/li>\n\n\n\n<li>src\/components\/counterButton \u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u30dc\u30bf\u30f3\u90e8\u5206<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">useCallback\u3092\u4f7f\u308f\u306a\u3044\u5834\u5408<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">App.js<\/h4>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true \" title=\"src\/App.js\" >import '.\/App.css';\nimport { useState } from 'react'\n\nimport CounterView from '.\/components\/CounterView';\nimport CounterButton from '.\/components\/CounterButton';\n\nfunction App() {\n\n  const [countA, setCountA] = useState(0)\n  const [countB, setCountB] = useState(0)\n\n  const PlusCount = () =&gt; {\n    setCountA(prevCountA =&gt; prevCountA + 1)\n  }\n\n  const MinusCnount = () =&gt; {\n    setCountB(prevCountB =&gt; prevCountB - 1)\n  }\n  return (\n    &lt;div className=\"App\"&gt;\n    &lt;CounterView name = 'countA' count ={countA}\/&gt;\n    &lt;CounterButton handleClick ={PlusCount}&gt;\u30d7\u30e9\u30b91&lt;\/CounterButton&gt;\n    &lt;hr&gt;&lt;\/hr&gt;\n    &lt;CounterView name = 'countB' count ={countB}\/&gt;\n    &lt;CounterButton handleClick ={MinusCnount}&gt;\u30de\u30a4\u30ca\u30b91&lt;\/CounterButton&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true \" title=\"src\/components\/CounterViews.js\" >import React from 'react'\n\nconst CounterView = ({ name, count }) =&gt; {\n  console.log(`\u8868\u793a\u540d: ${name}`)\n  return (\n    &lt;div&gt;\n      &lt;h3&gt; {count}&lt;\/h3&gt;\n    &lt;\/div&gt;\n  )\n}\n\nexport default CounterView<\/pre><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true \" title=\"src\/components\/CounterButton.js\" >import React from 'react'\n\nconst CounterButton = ({ handleClick, children }) =&gt; {\n  console.log('\u30dc\u30bf\u30f3\u51e6\u7406 : ', children)\n  return (\n    &lt;div&gt;\n      &lt;button onClick={handleClick}&gt;{children}&lt;\/button&gt;\n    &lt;\/div&gt;\n  )\n}\n\nexport default CounterButton\n<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u52d5\u4f5c\u30c1\u30a7\u30af<\/h3>\n\n\n\n<p>\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u3044\u305f\u3068\u304d\uff08\u521d\u671f\u306e\u30de\u30a6\u30f3\u30c8\uff09\u306e\u30ed\u30b0\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"362\" height=\"221\" src=\"https:\/\/www.searchlight8.com\/wp\/wp-content\/uploads\/2024\/02\/2024-02-11_14h11_04.png\" alt=\"\" class=\"wp-image-5912\"\/><\/figure>\n\n\n\n<p>\u300cCounterView\u300d\u300cCounterButton\u300d\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u30d7\u30e9\u30b9\u30dc\u30bf\u30f3\uff08A)\u3001\u30de\u30a4\u30ca\u30b9\u30dc\u30bf\u30f3\uff08B\uff09\u306e\uff12\u3064\u5206\u52d5\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30d7\u30e9\u30b9\u30fb\u30de\u30a4\u30ca\u30b9\u30dc\u30bf\u30f3\u3069\u3061\u3089\u3092\u62bc\u3057\u3066\u3082\u3001\u4e0a\u8a18\u306e\u30ed\u30b0\u304c\uff11\u30bb\u30c3\u30c8\u305a\u3064\u5897\u3048\u3066\u3044\u304d\u307e\u3059\u3002\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u5c11\u306a\u3044\u3046\u3061\u306f\u826f\u3044\u3067\u3059\u304c\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u591a\u304f\u306a\u3063\u305f\u308a\u3001\u8ca0\u8377\u306e\u9ad8\u3044\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u542b\u307e\u308c\u3066\u3044\u305f\u308a\u3059\u308b\u3068\u5384\u4ecb\u305d\u3046\u306a\u306e\u306f\u308f\u304b\u308a\u307e\u3059\u306d\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p>\u3053\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u95a2\u6570\u306e\u7d50\u679c\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3059\u308b\u90e8\u5206(useMemo\uff09\u3068\u95a2\u6570\u305d\u306e\u3082\u306e\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\u3059\u308b\u90e8\u5206\uff08useCallback\uff09\u306b\u5206\u3051\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">useMemo\u3092\u5c0e\u5165<\/h3>\n\n\n\n<p>\u8868\u793a\u3059\u308b\u5024\u3084\u95a2\u6570\u306e\u7d50\u679c\u5024\u3092useMemo\u5316\u3059\u308b\u306e\u306f\u7c21\u5358\u3067\u3001\u30e2\u30b8\u30e5\u30fc\u30eb\u6700\u5f8c\u306eexport default\u306e\u5f8c\u308d\u306b\u6765\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u540d\u3092 React.memo()  \u3067\u56f2\u3080\u3060\u3051\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \" title=\"src\/components\/CounterViews.js\" >export default React.memo (CounterView)\n\n\n\n<\/pre><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true \" title=\"src\/components\/CounterButton.js\" >export default React.memo (CounterButton)<\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">\u52d5\u4f5c\u7d50\u679c<\/h4>\n\n\n\n<p>\u30d7\u30e9\u30b9\u30dc\u30bf\u30f3\uff08A)\u3092\u62bc\u3057\u305f\u5834\u5408\u306elog\u3067\u3059\u3002\u5024\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u52b9\u679c\u304c\u73fe\u308c\u3001countB\u306f\u52d5\u304b\u306a\u304f\u306a\u308a\u307e\u3057\u305f\u3002\u30dc\u30bf\u30f3\u51e6\u7406\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u306f\u4e21\u65b9\u3068\u3082\u52d5\u3044\u3066\u3057\u307e\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"256\" height=\"100\" src=\"https:\/\/www.searchlight8.com\/wp\/wp-content\/uploads\/2024\/02\/2024-02-11_14h31_16.png\" alt=\"\" class=\"wp-image-5917\"\/><\/figure>\n\n\n\n<p>\u4eca\u5ea6\u306f\u30de\u30a4\u30ca\u30b9\u30dc\u30bf\u30f3\uff08B\uff09\u3092\u62bc\u3057\u3066\u307f\u307e\u3059\u3002\u8868\u793a\u306fB\u306e\u51e6\u7406\u306e\u307f\u304c\u52d5\u3044\u3066\u3044\u307e\u3059\u3002\u30dc\u30bf\u30f3\u306e\u51e6\u7406\u306f\u4e21\u65b9\u52d5\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"448\" height=\"99\" src=\"https:\/\/www.searchlight8.com\/wp\/wp-content\/uploads\/2024\/02\/2024-02-11_14h33_20.png\" alt=\"\" class=\"wp-image-5918\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">useCallback\u306e\u5c0e\u5165<\/h3>\n\n\n\n<p>\u4eca\u56de\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u5834\u5408\u3001useCallback\u306fApp.js\u3092\u5909\u66f4\u3059\u308b\u3060\u3051\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305a\u4e0a\u90e8\u3067 useCallback \u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true \" title=\"src\/App.js\" >import '.\/App.css';\nimport { useState } from 'react'\nimport { useCallback } from 'react'\nimport CounterView from '.\/components\/CounterView';\nimport CounterButton from '.\/components\/CounterButton';\n\n\nfunction App() {\n\n  const [countA, setCountA] = useState(0)\n  const [countB, setCountB] = useState(0)\n\n  const PlusCount = useCallback(() =&gt; {\n    setCountA(prevCountA =&gt; prevCountA + 1)\n  },[countA])\n\n\n  const MinusCnount = useCallback(() =&gt; {\n    setCountB(prevCountB =&gt; prevCountB - 1)\n  },[countB])\n\n  return (\n    &lt;div className=\"App\"&gt;\n    &lt;CounterView name = 'countA' count ={countA}\/&gt;\n    &lt;CounterButton handleClick ={PlusCount}&gt;\u30d7\u30e9\u30b91&lt;\/CounterButton&gt;\n    &lt;hr&gt;&lt;\/hr&gt;\n    &lt;CounterView name = 'countB' count ={countB}\/&gt;\n    &lt;CounterButton handleClick ={MinusCnount}&gt;\u30de\u30a4\u30ca\u30b91&lt;\/CounterButton&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/pre><\/div>\n\n\n\n<p>\u30d7\u30e9\u30b91\u3001\u30de\u30a4\u30ca\u30b91\u3092\u8a08\u7b97\u3059\u308b\u95a2\u6570\u90e8\u5206\u3092 callback()\u3067\u56f2\u307f\u307e\u3059\u3002\u95a2\u6570\u306e\u4e2d\u306b\u7b2c\u4e8c\u5f15\u6570\u3092\u4f5c\u308a\u305d\u306e\u4e2d\u306b\u52d5\u4f5c\u306e\u767a\u706b\u70b9\u3068\u306a\u308b\u5909\u6570\uff08\u4f9d\u5b58\u914d\u5217\uff09\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u300cconst PlusCount\u300d\u300cconst MinusCnount\u300d\u306e2\u30f6\u6240\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u66f8\u5f0f\u2192  useCallback( ( )   => { \u95a2\u6570\u540d ( \u5177\u4f53\u7684\u306a\u51e6\u7406 ) },[countB] )<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7d50\u679c<\/h3>\n\n\n\n<p>\u25cf\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u6642\uff08\u521d\u671f\u30de\u30a6\u30f3\u30c8\uff09\u306f\u5168\u90e8\u304c\u52d5\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"248\" height=\"123\" src=\"https:\/\/www.searchlight8.com\/wp\/wp-content\/uploads\/2024\/02\/2024-02-11_14h53_44.png\" alt=\"\" class=\"wp-image-5922\"\/><\/figure>\n\n\n\n<p>\u25cf\u30d7\u30e9\u30b9\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3068\u304d\u306f\u30d7\u30e9\u30b9\u306b\u95a2\u9023\u3059\u308b\u51e6\u7406\u306e\u307f\u304c\u52d5\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"383\" height=\"67\" src=\"https:\/\/www.searchlight8.com\/wp\/wp-content\/uploads\/2024\/02\/2024-02-11_14h54_29.png\" alt=\"\" class=\"wp-image-5923\"\/><\/figure>\n\n\n\n<p>\u25cf\u540c\u69d8\u306b\u3001\u30de\u30a4\u30ca\u30b9\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3068\u304d\u3060\u3051\u306f\u30de\u30a4\u30ca\u30b9\u306b\u95a2\u9023\u3059\u308b\u51e6\u7406\u306e\u307f\u304c\u52d5\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"75\" src=\"https:\/\/www.searchlight8.com\/wp\/wp-content\/uploads\/2024\/02\/2024-02-11_14h55_32.png\" alt=\"\" class=\"wp-image-5924\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">useCallBack\u306b\u7a7a\u914d\u5217\u3092\u6307\u5b9a<\/h4>\n\n\n\n<p>\u4e0a\u8a18\u3067\u306f\u914d\u5217\u306e\u4e2d\u306b\u5909\u6570\u3092\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u304c\u3001\u4eca\u56de\u306e\u5834\u5408\u306f\u5909\u6570\u3092\u7a7a\u306b\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"60\" src=\"https:\/\/www.searchlight8.com\/wp\/wp-content\/uploads\/2024\/02\/2024-02-11_15h08_34.png\" alt=\"\" class=\"wp-image-5928\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>ReactHook\u306euseCallbac&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4570,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[323],"tags":[324,449,450],"class_list":["post-5896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","tag-react","tag-usecallback","tag-usememo","wpcat-323-id"],"_links":{"self":[{"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/posts\/5896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/comments?post=5896"}],"version-history":[{"count":25,"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/posts\/5896\/revisions"}],"predecessor-version":[{"id":5930,"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/posts\/5896\/revisions\/5930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/media\/4570"}],"wp:attachment":[{"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/media?parent=5896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/categories?post=5896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchlight8.com\/wp-searchlight8\/wp-json\/wp\/v2\/tags?post=5896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}