{"id":32887,"date":"2024-11-01T09:12:15","date_gmt":"2024-11-01T09:12:15","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32887"},"modified":"2024-11-01T11:21:36","modified_gmt":"2024-11-01T11:21:36","slug":"react-course-preventing-unnecessary-function-re-creations","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32887\/","title":{"rendered":"React Course: Preventing Unnecessary Function Re-creations"},"content":{"rendered":"<p><body><\/p>\n<p>React is a component-based front-end library that provides a means to build efficient and enjoyable user interfaces. However, while writing components in React, you may often encounter the problem of unnecessary function recreations. This can lead to performance degradation, and therefore, measures are needed to enhance the efficiency of React applications.<\/p>\n<h2>1. Reasons for Function Recreation<\/h2>\n<p>In React, JSX is executed every time a component is rendered. In this process, functions are also re-executed, generating new function instances. This can occur in the following situations:<\/p>\n<ul>\n<li>Regular functions defined within the component<\/li>\n<li>Event handlers<\/li>\n<li>Functions included in the dependency array of the effect hook (<code>useEffect<\/code>)<\/li>\n<\/ul>\n<p>If these functions are newly created on every render, it may lead to performance issues, especially in applications where performance is critical.<\/p>\n<h2>2. Methods to Prevent Unnecessary Function Recreation<\/h2>\n<h3>2.1. Using the useCallback Hook<\/h3>\n<p>The <code>useCallback<\/code> hook allows you to recreate a function only when specific dependencies change. This helps prevent unnecessary renders. Let&#8217;s take a look at the following example:<\/p>\n<pre><code>import React, { useState, useCallback } from 'react';\n\n    function Counter() {\n        const [count, setCount] = useState(0);\n\n        const increment = useCallback(() =&gt; {\n            setCount(c =&gt; c + 1);\n        }, []);\n\n        return (\n            <div>\n                <p>Count: {count}<\/p>\n                <button onclick=\"{increment}\">Increment<\/button>\n            <\/div>\n        );\n    }<\/code><\/pre>\n<p>In the example above, the <code>increment<\/code> function is memoized using <code>useCallback<\/code>, preventing unnecessary function recreation during the re-rendering of the <code>Counter<\/code> component.<\/p>\n<h3>2.2. Using the useMemo Hook<\/h3>\n<p>The <code>useMemo<\/code> hook allows you to memoize computed values, optimizing performance. You can improve performance by memoizing functions that perform complex calculations.<\/p>\n<pre><code>import React, { useState, useMemo } from 'react';\n\n    function FactorialCalculator() {\n        const [number, setNumber] = useState(1);\n\n        const factorial = useMemo(() =&gt; {\n            const calculateFactorial = (n) =&gt; {\n                return n &lt;= 0 ? 1 : n * calculateFactorial(n - 1);\n            };\n            return calculateFactorial(number);\n        }, [number]);\n\n        return (\n            <div>\n                <input ==\"\" onchange=\"{e\" type=\"number\" value=\"{number}\"\/> setNumber(e.target.value)} \/&gt;\n                <p>Factorial: {factorial}<\/p>\n            <\/div>\n        );\n    }<\/code><\/pre>\n<p>In the example above, the factorial calculation is executed only when the <code>number<\/code> state changes, preventing unnecessary recreation of the internal function.<\/p>\n<h3>2.3. Avoid Using Bind Method in Class Components<\/h3>\n<p>In class components, it is advisable to perform binding in the constructor using <code>this.methodName = this.methodName.bind(this);<\/code> or to define methods using arrow functions to avoid recreation of methods.<\/p>\n<pre><code>class MyComponent extends React.Component {\n        constructor(props) {\n            super(props);\n            this.handleClick = this.handleClick.bind(this); \/\/ Binding in the constructor\n        }\n\n        handleClick() {\n            console.log('Clicked!');\n        }\n\n        render() {\n            return <button onclick=\"{this.handleClick}\">Click me<\/button>;\n        }\n    }<\/code><\/pre>\n<h2>3. Performance Testing and Optimization Verification<\/h2>\n<p>After applying methods for performance optimization, it is recommended to use profiling tools to check for changes in performance. You can measure rendering performance using the profiling feature provided by React&#8217;s <code>React DevTools<\/code>. This allows you to verify if unnecessary renders are occurring and consider additional optimizations if needed.<\/p>\n<h2>4. Conclusion<\/h2>\n<p>Preventing unnecessary function recreation in React applications is a very important task for performance improvement. By properly utilizing the <code>useCallback<\/code> and <code>useMemo<\/code> hooks, unnecessary renders can be avoided, and the binding methods in class components should also be considered. Remember that performance optimization is a repetitive process, and consistently monitoring and improving application performance is essential.<\/p>\n<h2>5. References<\/h2>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\">React Docs: useCallback<\/a><\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usememo\">React Docs: useMemo<\/a><\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/components-and-props.html#class-and-function-components\">React Docs: Class and Function Components<\/a><\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is a component-based front-end library that provides a means to build efficient and enjoyable user interfaces. However, while writing components in React, you may often encounter the problem of unnecessary function recreations. This can lead to performance degradation, and therefore, measures are needed to enhance the efficiency of React applications. 1. Reasons for Function &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32887\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;React Course: Preventing Unnecessary Function Re-creations&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[123],"tags":[],"class_list":["post-32887","post","type-post","status-publish","format-standard","hentry","category-react-basics-course"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Course: Preventing Unnecessary Function Re-creations - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32887\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Course: Preventing Unnecessary Function Re-creations - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"React is a component-based front-end library that provides a means to build efficient and enjoyable user interfaces. However, while writing components in React, you may often encounter the problem of unnecessary function recreations. This can lead to performance degradation, and therefore, measures are needed to enhance the efficiency of React applications. 1. Reasons for Function &hellip; \ub354 \ubcf4\uae30 &quot;React Course: Preventing Unnecessary Function Re-creations&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32887\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:12:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:21:36+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32887\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32887\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"React Course: Preventing Unnecessary Function Re-creations\",\"datePublished\":\"2024-11-01T09:12:15+00:00\",\"dateModified\":\"2024-11-01T11:21:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32887\/\"},\"wordCount\":385,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32887\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32887\/\",\"name\":\"React Course: Preventing Unnecessary Function Re-creations - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:12:15+00:00\",\"dateModified\":\"2024-11-01T11:21:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32887\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32887\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32887\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Course: Preventing Unnecessary Function Re-creations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Course: Preventing Unnecessary Function Re-creations - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32887\/","og_locale":"ko_KR","og_type":"article","og_title":"React Course: Preventing Unnecessary Function Re-creations - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"React is a component-based front-end library that provides a means to build efficient and enjoyable user interfaces. However, while writing components in React, you may often encounter the problem of unnecessary function recreations. This can lead to performance degradation, and therefore, measures are needed to enhance the efficiency of React applications. 1. Reasons for Function &hellip; \ub354 \ubcf4\uae30 \"React Course: Preventing Unnecessary Function Re-creations\"","og_url":"https:\/\/atmokpo.com\/w\/32887\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:12:15+00:00","article_modified_time":"2024-11-01T11:21:36+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"2\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32887\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32887\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"React Course: Preventing Unnecessary Function Re-creations","datePublished":"2024-11-01T09:12:15+00:00","dateModified":"2024-11-01T11:21:36+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32887\/"},"wordCount":385,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32887\/","url":"https:\/\/atmokpo.com\/w\/32887\/","name":"React Course: Preventing Unnecessary Function Re-creations - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:12:15+00:00","dateModified":"2024-11-01T11:21:36+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32887\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32887\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32887\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"React Course: Preventing Unnecessary Function Re-creations"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32887"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32887\/revisions"}],"predecessor-version":[{"id":32888,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32887\/revisions\/32888"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}