{"id":8812,"date":"2023-05-19T08:53:31","date_gmt":"2023-05-19T08:53:31","guid":{"rendered":"https:\/\/positiwise.com\/?p=8812"},"modified":"2023-08-25T09:43:19","modified_gmt":"2023-08-25T09:43:19","slug":"how-do-you-handle-side-effects-of-reactjs","status":"publish","type":"post","link":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs","title":{"rendered":"How Do You Handle Side Effects of ReactJS?"},"content":{"rendered":"\n<p><strong class=\"pw-highlight-text-color\"><em>Quick Overview:<\/em><\/strong><br>Several developers came across the React side-effect while doing&nbsp;<a href=\"https:\/\/positiwise.com\/blog\/how-to-create-react-application-in-just-a-few-minutes\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>ReactJS application development<\/strong><\/a>&nbsp;or learning about it. And some even confuse it with a kind of bug or an error.<br><br>However, it\u2019s a feature that aids in extending the functionality of the application.&nbsp;In addition, learning about side effects and handling them would help improve app robustness. And as per professionals, it\u2019s as essential as other React components.<br><br>Here, you will understand the basics of React side effects and how to efficiently handle them in a ReactJS app.&nbsp;So, let\u2019s get started.&nbsp;<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#What_is_Node_JS_and_Why_is_it_used\" >What is Node JS, and Why is it used?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#A_Descriptive_Node_JS_Development_Guide_for_Your_Software_Projects\" >A Descriptive Node JS Development Guide for Your Software Projects<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Node_JS_Architecture\" >Node JS Architecture<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#How_is_Node_JS_better_than_other_Backend_Technologies\" >How is Node JS better than other Backend Technologies?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Pros_of_Node_JS\" >Pros of Node JS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#NPM_Package_Manager\" >NPM Package Manager<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Non-Blocking_Inputoutput\" >Non-Blocking Input\/output<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Code_Reusability\" >Code Reusability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Affordable_Development\" >Affordable Development<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Ample_Community_Support\" >Ample Community Support<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#High-Performance_and_Scalability\" >High-Performance and Scalability<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Cons_of_Node_JS\" >Cons of Node JS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Delay_of_Output_in_exceptional_circumstances\" >Delay of Output in exceptional circumstances<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Lack_of_Stable_Tools\" >Lack of Stable Tools<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#When_to_avoid_Development_using_Node_JS_Technology\" >When to avoid Development using Node JS Technology<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Where_to_learn_Node_JavaScript\" >Where to learn Node JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\/#Concluding_Up\" >Concluding Up<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\">What is React Side-Effect?<\/h2>\n\n\n\n<p>Before you dive into the React Side-Effect, you must know about the pure function. It would help you gain a deep insight into the working and handling of the side-effect.&nbsp;<\/p>\n\n\n\n<p>In ReactJS, almost every component is a pure function. It means that their output would be the same for the same input. And you can determine the output from the input value. In addition, all such pure components work inside the React environment and don\u2019t communicate or fetch data from an external source. But, ReactJS provides the capability to develop an application that can:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Insight To React Side-Effect In Render<\/h2>\n\n\n\n<p>In every ReactJS-based application, a side-effect gets used in one way or another. It helps to manage the unexpected results from the system and provide an efficient output to the user. Also, the code puts side-effect components separately, especially away from the rendering process.<\/p>\n\n\n\n<p>Whenever you write a ReactJS code, always remember to configure side-effect execution after the rendering process. Otherwise, it can interrupt the rendering, leading to quality and performance downgrade.<\/p>\n\n\n\n<p>Further, there\u2019s a common mistake while defining the side-effect that most developers do. They don\u2019t use a dependency array with it, which leads to run side-effect after every render. In the other section, we will discuss handling side-effect. Then, you will gain a better insight into the relation and implementation of side effects and rendering.&nbsp;<\/p>\n\n\n\n<p>However, it entirely depends upon the requirements of whether someone wants side-effect to execute once or after every render. But, it\u2019s always recommended to execute it only one time and too after the rendering procedure.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using the useEffect To Handle React Side-Effect<\/h2>\n\n\n\n<p>In ReactJS application development, using the useEffect hook is the most prominent way to handle side effects. It\u2019s a hook that lets developers process side effects for updating DOM, fetching data, and using timers. And every useEffect needs two arguments to operate.&nbsp;<\/p>\n\n\n\n<p>Syntax of useEffect:&nbsp;<\/p>\n\n\n\n<p><strong>useEffect(&lt;function&gt;, &lt;dependency&gt;)&nbsp;<\/strong><\/p>\n\n\n\n<p>The &lt;function&gt; argument in the syntax is mandatory; however, you can skip to provide a variable for the &lt;dependency&gt; argument.&nbsp;<\/p>\n\n\n\n<p>Furthermore, you must understand the following concepts about the control flow of the useEffect:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The ReactJS components are based on state, change of context, and prop for re-rendering.&nbsp;<\/li>\n\n\n\n<li>If multiple useEffect hooks are defined in the code, then ReactJS will analyze and cross-verify all with the current condition. And the best one aligning with the conditions will get processed.&nbsp;<\/li>\n\n\n\n<li>The second argument, i.e., &lt;dependency&gt;, is an array from the state, context, or props components.&nbsp;<\/li>\n\n\n\n<li>The scheduling and execution of every side-effect depend upon the definition of its dependencies.&nbsp;<\/li>\n\n\n\n<li>If you don\u2019t provide a dependency argument in the useEffect syntax, that particular effect will be processed after each rendering.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Additionally, it would be best to use the useEffect hook\u2019s cleanup functionality. It aids in minimizing memory leaks for side effects that are not needed further. You must utilize it for timeouts, event listeners, and similar services.&nbsp;<\/p>\n\n\n\n<p>However, before you start implementing the useEffect hook, focus on the associated rules:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can only invoke the useEffect hook from the top-level function. And that function must contain your React component.&nbsp;<\/li>\n\n\n\n<li>You cannot call useEffect hooks within the nested code and inside another function.&nbsp;<\/li>\n\n\n\n<li>You can create custom useEffect hooks as per your requirement. But, the condition is the same, as you can only call a hook from the top-level function.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Once you understand all three rules, utilizing useEffect and handling side-effects will become effortless. And your ReactJS application will seamlessly connect with external sources through APIs for data-oriented operations.&nbsp;<\/p>\n\n\n\n<p>Now, let\u2019s look at the code to define the useEffect hook.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">useEffect(\n    () =&gt; {\n        \/\/ execute side effect\n    },\n    \/\/ optional dependency array\n    [\n        \/\/ 0 or more entries\n    ] \n)<\/pre><\/div>\n\n\n\n<p>And, if you don\u2019t want to pass the &lt;dependency&gt; argument, use the following signature.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">useEffect(() =&gt; { \n    \/\/ execute side effect\n})<\/pre><\/div>\n\n\n\n<p>To understand the useEffect usage more thoroughly, let\u2019s create an example code of changing the title through an input box. The code\u2019s primary function is to modify the page title to the same as the input entered by an end-user.<\/p>\n\n\n\n<p><strong>The ReactJS Code:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">import React, { useState, useRef, useEffect } from &quot;react&quot;;\nfunction EffectsDemoNoDependency() {\n  const [title, setTitle] = useState(&quot;default title&quot;);\n  const titleRef = useRef();\n  useEffect(() =&gt; {\n    console.log(&quot;useEffect&quot;);\n    document.title = title;\n  });\n  const handleClick = () =&gt; setTitle(titleRef.current.value);\n  console.log(&quot;render&quot;);\n  return (\n    &lt;div&gt;\n      &lt;input ref={titleRef} \/&gt;\n      &lt;button onClick={handleClick}&gt;change title&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}<\/pre><\/div>\n\n\n\n<p>In the provided above code, you can see that useEffect gets defined with only the first mandatory argument. It means that it will execute after every rendering. You must execute this code on your machine to dig deeper into the concept.<\/p>\n\n\n\n<p>Moreover, the code contains a console.log statement, enabling one to view the side-effect working by analyzing the logs. And in the logs, you will see that first, the ReactJS code is rendering, and then the useEffect hook is coming into action.<\/p>\n\n\n\n<p>Let\u2019s see more examples based on different situations, execution after the first rendering and execution after every rendering.<\/p>\n\n\n\n<p><strong>Code example for useEffect processing after first rendering.<\/strong><\/p>\n\n\n\n<p>With this code, you can enable the ReactJS application to update the loadData directly after the first rendering.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlembedded&quot;,&quot;mime&quot;:&quot;application\/x-aspx&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;ASP.NET&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;aspx&quot;}\">const { useState, useEffect } = React;\n\nfunction App() {\n  const [loading, setLoading] = useState(false);\n  const [data, setData] = useState(null);\n  function loadData() {\n    setLoading(true);\n    setTimeout(() =&gt; {\n      setLoading(false);\n      setData([1, 2, 3, 4, 5]);\n    }, 1000);\n  }\n\n  useEffect(loadData, []);\n\n  return (\n    &lt;&gt;\n      {loading &amp;&amp; &lt;p&gt;Loading...&lt;\/p&gt;}\n      {data &amp;&amp; &lt;pre&gt;{JSON.stringify(data, null, 1)}&lt;\/pre&gt;}\n    &lt;\/&gt;\n  );\n}\n\nReactDOM.createRoot(document.getElementById('root')).render(&lt;App \/&gt;);<\/pre><\/div>\n\n\n\n<p>In most cases where you don\u2019t pass the dependency argument, the useEffect hook gets executed after every rendering. In the code example, in which the user inputs the title, it\u2019s possible to face such a problem. Thus, to eliminate it, you must pass an empty dependency or array. As a result, the ReactJS application will function as per requirements.<\/p>\n\n\n\n<p>Also, you must ensure that you don\u2019t use the side-effect functionality if the application needs to transform data for rendering purposes. And for handling and managing user events. For rest operations, the side-effect is a reliable React component.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">An Advanced Helping Hand in Handling React Side-Effect&nbsp;<\/h2>\n\n\n\n<p>For the fast pace ReactJS Application Development, you can utilize the ESLint plugin, a Hooks API component. It integrates with IDE and helps maintain the app with useEffect hook rules. Also, it aids in eliminating bugs and streamlining the passing of dependency arguments.<\/p>\n\n\n\n<p>Moreover, you can also rely on it for providing the most reliable array, ensuring the smooth execution of side-effect after the rendering. Once you start utilizing the ESLint plugin, it will automatically enforce the hook rules, reducing your efforts and development time.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"506\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/effects-demo.png\" alt=\"effects demo\" class=\"wp-image-10619\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/effects-demo.png 718w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/effects-demo-300x211.png 300w\" sizes=\"auto, (max-width: 718px) 100vw, 718px\" \/><\/figure>\n\n\n\n<p>Additionally, take care of the following points while using the plugin:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>View and analyze the dependency suggestion provided by the plugin before implementing it.&nbsp;<\/li>\n\n\n\n<li>Thoroughly test the code to resolve compatibility issues.&nbsp;<\/li>\n\n\n\n<li>Firstly, pass dependencies manually and take the plugin\u2019s suggestion as a secondary source.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">ReactJS Development Services, For Splendid Business Applications&nbsp;<\/h2>\n\n\n\n<p>ReactJS applications are prevalent in every industry. And most companies prefer it over other technologies. But, you can only leverage its benefits if you select an authentic&nbsp;<a href=\"https:\/\/positiwise.com\/technologies\/reactjs-development\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>ReactJS development company<\/strong><\/a>, such as Positiwise Software Pvt Ltd.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-group border rounded bg-light has-global-padding is-layout-constrained wp-container-core-group-is-layout-a666d811 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-text-align-center fs-2 text-blue lh-sm has-contrast-color has-text-color\"><strong>Empower Your Web Presence with Expert ReactJS Development Services!<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center mt-2\">Unlock unparalleled web experiences with our top-tier ReactJS Development Services. Our team of seasoned experts is dedicated to crafting dynamic, high-performance web applications that captivate users and drive business growth.<\/p>\n\n\n\n<div class=\"wp-block-buttons mt-3 is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-base-color has-text-color has-background wp-element-button\" href=\"https:\/\/positiwise.com\/technologies\/reactjs-development\" style=\"border-radius:100px;background-color:#ed7923;padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px\"><strong>Hire Dedicated ReactJS Developer<\/strong><\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>By partnering with Positiwise, you can ensure a top-notch ReactJS app complying with industry standards. In addition, You can take advantage of:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Responsive UI Creation Service<\/li>\n\n\n\n<li>Custom ReactJS Development Service&nbsp;<\/li>\n\n\n\n<li>Native Web App Development<\/li>\n\n\n\n<li>ReactJS Maintenance and Support&nbsp;<\/li>\n\n\n\n<li>Plugin Development&nbsp;<\/li>\n\n\n\n<li>App Migration Services and more<\/li>\n<\/ul>\n\n\n\n<p>Thus, you can avail of all required services only in one place by selecting Positiwise as your technology partner. In addition, it also guarantees topmost data security, timely delivery, and affordable development.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Concluding Up&nbsp;<\/h2>\n\n\n\n<p>React side-effect is a crucial component of a ReactJS application. It helps establish communication with external resources, such as local storage and supports utilizing APIs. However, one should crucially handle them using the useEffect hook; otherwise, it can lead to an application crash in the middle. The useEffect syntax consists of two primary arguments, the dependency, and the function. Among both, dependency is optional, but declaring a function is a must.<\/p>\n\n\n\n<p>Furthermore, you must always declare both arguments. Otherwise, it can cause bugs and errors. And if you want some automated tool to suggest the suitable dependency array, then utilize the ESLint plugin. Moreover, learn the useEffect hook rules before you implement them.<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"What Makes Node JS Considerable for Software Development\" href=\"https:\/\/positiwise.com\/blog\/nodejs-for-software-development\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"What Makes NodeJS Considerable for Software Development\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1.jpg 1200w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1-300x150.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1-1024x512.jpg 1024w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1-768x384.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"What Makes Node JS Considerable for Software Development\" href=\"https:\/\/positiwise.com\/blog\/nodejs-for-software-development\">\r\n        What Makes Node JS Considerable for Software Development  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How to Install NPM and Node.js on Mac and Windows\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-npm-and-node-js-on-mac-and-windows\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-npm-and-nodejs.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"install-npm-and-nodejs\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-npm-and-nodejs.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-npm-and-nodejs-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-npm-and-nodejs-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How to Install NPM and Node.js on Mac and Windows\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-npm-and-node-js-on-mac-and-windows\">\r\n        How to Install NPM and Node.js on Mac and Windows  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"What is NodeJS Technology? All-in-One Guide for 2022\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\">\r\n\r\n      <img loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/what-is-nodejs-technology-all-in-one-guide-for-2022.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"What is NodeJS Technology? All-in-One Guide for 2022\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/what-is-nodejs-technology-all-in-one-guide-for-2022.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/what-is-nodejs-technology-all-in-one-guide-for-2022-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/04\/what-is-nodejs-technology-all-in-one-guide-for-2022-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"What is NodeJS Technology? All-in-One Guide for 2022\" href=\"https:\/\/positiwise.com\/blog\/what-is-nodejs-technology-all-in-one-guide-for-2022\">\r\n        What is NodeJS Technology? All-in-One Guide for 2022  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Quick Overview:Several developers came across the React side-effect while doing&nbsp;ReactJS application development&nbsp;or learning about it. And some even [&hellip;]<\/p>\n  <div class=\"related-post slider\">\r\n        <div class=\"headline\">Related Posts<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"What Makes Node JS Considerable for Software Development\" href=\"https:\/\/positiwise.com\/blog\/nodejs-for-software-development\">\r\n\r\n      <img width=\"1200\" height=\"600\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"What Makes NodeJS Considerable for Software Development\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1.jpg 1200w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1-300x150.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1-1024x512.jpg 1024w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2021\/12\/node-js-for-software-development-1200x600-1-768x384.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"What Makes Node JS Considerable for Software Development\" href=\"https:\/\/positiwise.com\/blog\/nodejs-for-software-development\">\r\n        What Makes Node JS Considerable for Software Development  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"How to Install NPM and Node.js on Mac and Windows\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-npm-and-node-js-on-mac-and-windows\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-npm-and-nodejs.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"install-npm-and-nodejs\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-npm-and-nodejs.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-npm-and-nodejs-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/08\/install-npm-and-nodejs-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"How to Install NPM and Node.js on Mac and Windows\" href=\"https:\/\/positiwise.com\/blog\/how-to-install-npm-and-node-js-on-mac-and-windows\">\r\n        How to Install NPM and Node.js on Mac and Windows  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"The Best Node JS Framework List for 2022\" href=\"https:\/\/positiwise.com\/blog\/the-best-node-js-framework-list-for-2022\">\r\n\r\n      <img width=\"1021\" height=\"621\" src=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/05\/nodejs-platforms-1.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"The Best Node JS Framework List for 2022\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/05\/nodejs-platforms-1.jpg 1021w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/05\/nodejs-platforms-1-300x182.jpg 300w, https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2022\/05\/nodejs-platforms-1-768x467.jpg 768w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"The Best Node JS Framework List for 2022\" href=\"https:\/\/positiwise.com\/blog\/the-best-node-js-framework-list-for-2022\">\r\n        The Best Node JS Framework List for 2022  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 5px;\r\n      padding: 0px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 2rem !important;\r\n      color: #212529 !important;\r\n          }\r\n\r\n    .related-post .headline {\r\nmargin-top: 0;\r\npadding-left: 1%;\r\n}.related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 0px 0px 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 1rem;\r\n      color: #212529;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 13px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 3,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 3,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: true,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: true,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>\r\n","protected":false},"author":4,"featured_media":9767,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[279],"tags":[],"class_list":["post-8812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>React Side Effects: What They Are and How to Handle Them<\/title>\n<meta name=\"description\" content=\"Learn what side effects are in React, how to identify them, and best practices for handling them properly to build robust React apps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Do You Handle Side Effects of ReactJS?\" \/>\n<meta property=\"og:description\" content=\"Learn what side effects are in React, how to identify them, and best practices for handling them properly to build robust React apps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs\" \/>\n<meta property=\"og:site_name\" content=\"Positiwise\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/positiwise\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-19T08:53:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T09:43:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-do-you-handle-side-effects-of-reactjs-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1021\" \/>\n\t<meta property=\"og:image:height\" content=\"621\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jemin Desai\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@positiwise\" \/>\n<meta name=\"twitter:site\" content=\"@positiwise\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jemin Desai\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs\"},\"author\":{\"name\":\"Jemin Desai\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/c5edd81b0333e026938f30ed21953916\"},\"headline\":\"How Do You Handle Side Effects of ReactJS?\",\"datePublished\":\"2023-05-19T08:53:31+00:00\",\"dateModified\":\"2023-08-25T09:43:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs\"},\"wordCount\":1466,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/how-do-you-handle-side-effects-of-reactjs-1.jpg\",\"articleSection\":[\"React JS Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs#respond\"]}],\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs\",\"name\":\"React Side Effects: What They Are and How to Handle Them\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/how-do-you-handle-side-effects-of-reactjs-1.jpg\",\"datePublished\":\"2023-05-19T08:53:31+00:00\",\"dateModified\":\"2023-08-25T09:43:19+00:00\",\"description\":\"Learn what side effects are in React, how to identify them, and best practices for handling them properly to build robust React apps.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs#primaryimage\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/how-do-you-handle-side-effects-of-reactjs-1.jpg\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/how-do-you-handle-side-effects-of-reactjs-1.jpg\",\"width\":1021,\"height\":621,\"caption\":\"How Do You Handle Side Effects of ReactJS?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/how-do-you-handle-side-effects-of-reactjs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/positiwise.com\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Do You Handle Side Effects of ReactJS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"name\":\"Positiwise\",\"description\":\"Providing Full-cycle Software Development Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\"},\"alternateName\":\"Positiwise Software Pvt Ltd\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#organization\",\"name\":\"Positiwise\",\"alternateName\":\"Positiwise Software Pvt Ltd\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo.png\",\"width\":202,\"height\":29,\"caption\":\"Positiwise\"},\"image\":{\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/positiwise\\\/\",\"https:\\\/\\\/x.com\\\/positiwise\",\"https:\\\/\\\/github.com\\\/positiwise\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/positiwise\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/#\\\/schema\\\/person\\\/c5edd81b0333e026938f30ed21953916\",\"name\":\"Jemin Desai\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g\",\"caption\":\"Jemin Desai\"},\"description\":\"Jemin Desai is Chief Marketing Officer at Positiwise Software Pvt Ltd, he is responsible for creating and accelerating the company\u2019s marketing strategy and brand recognition across the globe. He has more than 20 years of experience in senior marketing roles at the Inc. 5000 Fastest-Growing Private Companies.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/jeminseo\"],\"url\":\"https:\\\/\\\/positiwise.com\\\/blog\\\/author\\\/jemin-desai\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Side Effects: What They Are and How to Handle Them","description":"Learn what side effects are in React, how to identify them, and best practices for handling them properly to build robust React apps.","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:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs","og_locale":"en_US","og_type":"article","og_title":"How Do You Handle Side Effects of ReactJS?","og_description":"Learn what side effects are in React, how to identify them, and best practices for handling them properly to build robust React apps.","og_url":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs","og_site_name":"Positiwise","article_publisher":"https:\/\/www.facebook.com\/positiwise\/","article_published_time":"2023-05-19T08:53:31+00:00","article_modified_time":"2023-08-25T09:43:19+00:00","og_image":[{"width":1021,"height":621,"url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-do-you-handle-side-effects-of-reactjs-1.jpg","type":"image\/jpeg"}],"author":"Jemin Desai","twitter_card":"summary_large_image","twitter_creator":"@positiwise","twitter_site":"@positiwise","twitter_misc":{"Written by":"Jemin Desai","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs#article","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs"},"author":{"name":"Jemin Desai","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/c5edd81b0333e026938f30ed21953916"},"headline":"How Do You Handle Side Effects of ReactJS?","datePublished":"2023-05-19T08:53:31+00:00","dateModified":"2023-08-25T09:43:19+00:00","mainEntityOfPage":{"@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs"},"wordCount":1466,"commentCount":0,"publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"image":{"@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-do-you-handle-side-effects-of-reactjs-1.jpg","articleSection":["React JS Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs#respond"]}],"copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/positiwise.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs","url":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs","name":"React Side Effects: What They Are and How to Handle Them","isPartOf":{"@id":"https:\/\/positiwise.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs#primaryimage"},"image":{"@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs#primaryimage"},"thumbnailUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-do-you-handle-side-effects-of-reactjs-1.jpg","datePublished":"2023-05-19T08:53:31+00:00","dateModified":"2023-08-25T09:43:19+00:00","description":"Learn what side effects are in React, how to identify them, and best practices for handling them properly to build robust React apps.","breadcrumb":{"@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs#primaryimage","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-do-you-handle-side-effects-of-reactjs-1.jpg","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/05\/how-do-you-handle-side-effects-of-reactjs-1.jpg","width":1021,"height":621,"caption":"How Do You Handle Side Effects of ReactJS?"},{"@type":"BreadcrumbList","@id":"https:\/\/positiwise.com\/blog\/how-do-you-handle-side-effects-of-reactjs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/positiwise.com\/blog"},{"@type":"ListItem","position":2,"name":"How Do You Handle Side Effects of ReactJS?"}]},{"@type":"WebSite","@id":"https:\/\/positiwise.com\/blog\/#website","url":"https:\/\/positiwise.com\/blog\/","name":"Positiwise","description":"Providing Full-cycle Software Development Services","publisher":{"@id":"https:\/\/positiwise.com\/blog\/#organization"},"alternateName":"Positiwise Software Pvt Ltd","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/positiwise.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/positiwise.com\/blog\/#organization","name":"Positiwise","alternateName":"Positiwise Software Pvt Ltd","url":"https:\/\/positiwise.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","contentUrl":"https:\/\/positiwise.com\/blog\/wp-content\/uploads\/2023\/07\/logo.png","width":202,"height":29,"caption":"Positiwise"},"image":{"@id":"https:\/\/positiwise.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/positiwise\/","https:\/\/x.com\/positiwise","https:\/\/github.com\/positiwise","https:\/\/www.linkedin.com\/company\/positiwise"]},{"@type":"Person","@id":"https:\/\/positiwise.com\/blog\/#\/schema\/person\/c5edd81b0333e026938f30ed21953916","name":"Jemin Desai","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/288c332112f4a87cfce31dcb7037bd4d22db699444c717af477ae7726459c4c7?s=96&r=g","caption":"Jemin Desai"},"description":"Jemin Desai is Chief Marketing Officer at Positiwise Software Pvt Ltd, he is responsible for creating and accelerating the company\u2019s marketing strategy and brand recognition across the globe. He has more than 20 years of experience in senior marketing roles at the Inc. 5000 Fastest-Growing Private Companies.","sameAs":["https:\/\/www.linkedin.com\/in\/jeminseo"],"url":"https:\/\/positiwise.com\/blog\/author\/jemin-desai"}]}},"_links":{"self":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/comments?post=8812"}],"version-history":[{"count":7,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8812\/revisions"}],"predecessor-version":[{"id":12788,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/posts\/8812\/revisions\/12788"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media\/9767"}],"wp:attachment":[{"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/media?parent=8812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/categories?post=8812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/positiwise.com\/blog\/wp-json\/wp\/v2\/tags?post=8812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}