<p>Learn how to implement custom React form validation using advanced patterns, best practices and libraries formik and yup, dynamic schema validation, multi-step validation, custom messages, etc.</p>

Custom React Form Validation: Tips, Tricks, and Code Examples | Relia Software

large_react-form-validation.webp

medium_react-form-validation.webp

small_react-form-validation.webp

thumbnail_react-form-validation.webp

react-form-validation.webp

React Form Validation: Advanced Techniques and Best Practices

<p data-sourcepos="7:3-7:178">Build powerful data visualizations with React Chart.js. This blog covers from basic chart types, advanced customization, and interactive features to real-time updates.</p>

Mastering React Chart.js: From Basic to Advanced Tutorial | Relia Software

Build Interactive Charts with React Chart.js

large_build-interactive-charts-with-react-chartjs.webp

medium_build-interactive-charts-with-react-chartjs.webp

small_build-interactive-charts-with-react-chartjs.webp

thumbnail_build-interactive-charts-with-react-chartjs.webp

build-interactive-charts-with-react-chartjs.webp

An Ultimate Guide to Build Interactive Charts with React Chart.js

<p data-sourcepos="3:1-4:56">Explore the power of React and WebSocket in real-time web applications. This blog guides from environment setup to handling advanced techniques and best practices.</p>

Building and Handling Real-time Data in React with WebSocket | Relia Software

Building and Handling Real-time Data in React with WebSocket

large_react-websocket.webp

medium_react-websocket.webp

small_react-websocket.webp

thumbnail_react-websocket.webp

react-websocket.webp

<p>Taking advantage of the power of GraphQL with React for optimizing data fetching can significantly enhance the performance and responsiveness of your applications.</p>

Unlock the Power of GraphQL with React to Master Data Fetching | Relia Software

Unlock the Power of GraphQL with React to Master Data Fetching

large_graphql-with-react.webp

medium_graphql-with-react.webp

small_graphql-with-react.webp

thumbnail_graphql-with-react.webp

graphql-with-react.webp

<p>React Server Actions are a powerful feature allowing developers to handle server-side logic seamlessly within their React components, reducing latency and simplifying the data flow.</p>

Mastering React Server Actions for Optimizing Data Fetching | Relia Software

Mastering React Server Actions for Optimizing Data Fetching

large_react-server-actions.webp

medium_react-server-actions.webp

small_react-server-actions.webp

thumbnail_react-server-actions.webp

react-server-actions.webp

<p>Hey there, React enthusiasts! Today, we're diving into the world of performance optimization in React, specifically with <a href="https://reliasoftware.com/blog/new-features-and-improvements-in-react-19">the latest features introduced in React 19</a>. This major release has brought several new tools and improvements that can help you make your React applications faster and more efficient. Let's explore some critical performance optimization techniques you can leverage in React 19 to elevate your development experience.</p>
<p>&gt;&gt;&nbsp;<em>Read more: </em><em>[React 19] Key Enhancements to <a href="https://reliasoftware.com/blog/ref-in-react-19">Ref Management in React</a></em></p>
<h2>Understanding Performance Optimization in React</h2>
<p>Performance optimization involves various strategies and techniques to enhance the speed and responsiveness of your React applications. The primary goal is to minimize the time it takes to render and update the UI, providing a smooth and efficient user experience.</p>
<p><strong>Key Areas of Optimization:</strong></p>
<ul>
<li><strong>Reducing Re-Renders</strong>: Minimizing unnecessary re-renders to improve rendering performance.</li>
<li><strong>Efficient State Management</strong>: Optimizing state updates to prevent performance bottlenecks.</li>
<li><strong>Code Splitting and Lazy Loading</strong>: Loading only the necessary parts of your application to improve load times.</li>
<li><strong>Server-Side Rendering (SSR)</strong>: Rendering components on the server to improve initial load times.</li>
<li><strong>Using Memoization</strong>: Caching expensive calculations to avoid redundant computations.</li>
</ul>
<p>&gt;&gt;&nbsp;<em>Read more:</em></p>
<ul>
<li><em>7 Best <a href="https://reliasoftware.com/blog/react-state-management-libraries">React State Management Libraries </a>for Any Project Size</em></li>
<li><em><a class="seoquake-params-link" href="https://reliasoftware.com/blog/react-redux" data-ved="2ahUKEwjGqpLg-IeHAxVL3zQHHTPmALEQFnoECCcQAQ">Demystifying React Redux for Centralized State Management</a></em></li>
<li><em>Top 6 Best <a href="https://reliasoftware.com/blog/react-component-library">React Component Libraries</a> for Your Projects</em></li>
<li><em>Top 9 Best <a href="https://reliasoftware.com/blog/react-animation-libraries">React Animation Libraries</a> for Web Developers</em></li>
</ul>
<h2>4 New Features in&nbsp;React 19&nbsp;for Performance Optimization</h2>
<p>React 19 introduces several new features that can significantly aid in performance optimization. Let's explore these features and how you can use them to optimize your React applications.</p>
<h3>The React Compiler</h3>
<p>One of the most revolutionary additions to React 19 is the <a href="https://reliasoftware.com/blog/react-compiler">React Compiler</a>. This tool automates performance optimizations, reducing the need for manual interventions using <code>useMemo()</code>, <code>useCallback()</code>, and <code>memo</code>.</p>
<p><strong>Example: Optimized Component with React Compiler</strong></p>
<pre class="language-javascript"><code>import React, { useState } from 'react';

const ExpensiveCalculation = ({ compute, value }) =&gt; {
  const result = compute(value);
  return &lt;div&gt;Result: {result}&lt;/div&gt;;
};

const App = () =&gt; {
  const [value, setValue] = useState(0);

  return (
    &lt;div&gt;
      &lt;ExpensiveCalculation compute={(val) =&gt; val * 2} value={value} /&gt;
      &lt;button onClick={() =&gt; setValue(value + 1)}&gt;Increment&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<p>In this example, the React Compiler handles optimization internally, ensuring the <code><span class="notion-enable-hover" spellcheck="false" data-token-index="1">ExpensiveCalculation</span></code> component is only re-rendered when necessary. This removes the need for manual optimizations and keeps the code clean and straightforward.</p>
<p>The reason for using this approach is that it simplifies the developer's work by offloading optimization tasks to the compiler, making the codebase cleaner and reducing the risk of human error in optimization.</p>
<h3>Automatic Batching</h3>
<p>React 19 introduces automatic batching, a feature that groups multiple state updates into a single render. This reduces unnecessary re-renders and improves performance.</p>
<p><strong>Example: Automatic Batching</strong></p>
<pre class="language-javascript"><code>import React, { useState } from 'react';

const App = () =&gt; {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('React');

  const handleClick = () =&gt; {
    setCount(count + 1);
    setName('React 19');
  };

  return (
    &lt;div&gt;
      &lt;p&gt;Count: {count}&lt;/p&gt;
      &lt;p&gt;Name: {name}&lt;/p&gt;
      &lt;button onClick={handleClick}&gt;Update&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<p>In this example, clicking the "Update" button triggers two state updates: incrementing the count and updating the name. Without automatic batching, each state update would cause a separate render, leading to performance inefficiencies.</p>
<p>With React 19's automatic batching, both state updates are grouped into a single render cycle. This reduces the number of renders and enhances performance by minimizing the work React needs to do during each update.</p>
<p>The reason for using automatic batching is to ensure that multiple state updates result in only one re-render, thus significantly improving the rendering performance.</p>
<h3>Server Components</h3>
<p><a href="https://reliasoftware.com/blog/react-server-components">React Server Components</a> allow developers to render components on the server, significantly enhancing performance by reducing the load on the client. This is particularly beneficial for applications with heavy data processing requirements.</p>
<p><strong>Example: Using Server Components</strong></p>
<pre class="language-javascript"><code>import React, { useState, useEffect } from 'react';

const ServerComponent = ({ fetchData }) =&gt; {
  const [data, setData] = useState(null);

  useEffect(() =&gt; {
    fetchData().then((result) =&gt; setData(result));
  }, [fetchData]);

  if (!data) return &lt;div&gt;Loading...&lt;/div&gt;;

  return &lt;div&gt;Data: {data}&lt;/div&gt;;
};

const App = () =&gt; {
  const fetchData = () =&gt; {
    return new Promise((resolve) =&gt; {
      setTimeout(() =&gt; resolve('Server-Side Data'), 1000);
    });
  };

  return &lt;ServerComponent fetchData={fetchData} /&gt;;
};

export default App;
</code></pre>
<p>In this example, <code>ServerComponent</code> fetches data from the server and displays it. By handling the data fetching on the server side, the client is offloaded from this task, resulting in faster load times and improved performance. When the component mounts, it calls the <code>fetchData</code> function, which simulates an API call.&nbsp;Once the data is fetched, it's stored in the component's state and rendered.</p>
<p>The reason for using Server Components is to leverage server resources for data fetching and processing, reducing the computational load on the client and enhancing the overall performance.</p>
<h3>Concurrent Rendering</h3>
<p>Concurrent rendering in React 19 enhances the responsiveness of your applications by allowing React to prepare multiple versions of the UI simultaneously. This ensures that high-priority updates are processed first.</p>
<p><strong>Example: Concurrent Rendering</strong></p>
<pre class="language-javascript"><code>import React, { useState, useTransition } from 'react';

const List = React.memo(({ items }) =&gt; {
  return (
    &lt;ul&gt;
      {items.map((item, index) =&gt; (
        &lt;li key={index}&gt;{item}&lt;/li&gt;
      ))}
    &lt;/ul&gt;
  );
});

const App = () =&gt; {
  const [items, setItems] = useState(Array.from({ length: 1000 }, (_, i) =&gt; `Item ${i}`));
  const [isPending, startTransition] = useTransition();

  const handleClick = () =&gt; {
    startTransition(() =&gt; {
      setItems((prevItems) =&gt; [...prevItems, `Item ${prevItems.length}`]);
    });
  };

  return (
    &lt;div&gt;
      &lt;button onClick={handleClick}&gt;Add Item&lt;/button&gt;
      {isPending ? &lt;p&gt;Loading...&lt;/p&gt; : &lt;List items={items} /&gt;}
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<p>In this example, the <code><span class="notion-enable-hover" spellcheck="false" data-token-index="1">List</span></code> component displays a large number of items. When the "Add Item" button is clicked, a new item is added to the list. Using React 19's <code><span class="notion-enable-hover" spellcheck="false" data-token-index="3">useTransition</span></code> hook, we can defer the rendering of this new item until the main UI update is complete. This means the button click feels responsive, and the user does not experience a lag while the new item is being added.</p>
<p>The reason for using concurrent rendering is to prioritize high-priority updates, ensuring a smoother user experience even under heavy load.</p>
<h2>Practical Tips for Performance Optimization in React</h2>
<p>Beyond the new features in React 19, there are several best practices and tips you can follow to optimize the performance of your React applications:</p>
<h3>Avoid Inline Functions and Objects</h3>
<p>Inline functions and objects can cause unnecessary re-renders because they are recreated on every render. By defining functions and objects outside of the render method, you can prevent these unnecessary re-renders.</p>
<p><strong>Example: Avoiding Inline Functions</strong></p>
<p><strong></strong></p>
<pre class="language-javascript"><code>import React, { useState, useCallback } from 'react';

const handleClick = (setCount) =&gt; {
  setCount((prevCount) =&gt; prevCount + 1);
};

const App = () =&gt; {
  const [count, setCount] = useState(0);

  return (
    &lt;div&gt;
      &lt;p&gt;Count: {count}&lt;/p&gt;
      &lt;button onClick={useCallback(() =&gt; handleClick(setCount), [setCount])}&gt;Increment&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<p>The reason for defining functions and objects outside of the render method is to ensure that they are not recreated on every render, thereby preventing unnecessary re-renders and improving performance.</p>
<h3>Use Pure Components</h3>
<p>Pure components only re-render when their props or state change. By using <code>React.PureComponent</code> or <code>React.memo</code>, you can prevent unnecessary re-renders and improve performance.</p>
<p><strong>Example: Using Pure Components</strong></p>
<p></p>
<pre class="language-javascript"><code>import React, { PureComponent } from 'react';

class Counter extends PureComponent {
  render() {
    const { count, onIncrement } = this.props;
    return (
      &lt;div&gt;
        &lt;p&gt;Count: {count}&lt;/p&gt;
        &lt;button onClick={onIncrement}&gt;Increment&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}

export default Counter;
</code></pre>
<p>The reason for using pure components is to ensure that components only re-render when necessary, thereby reducing the number of re-renders and improving performance.</p>
<h3>Optimize Images and Assets</h3>
<p>Optimizing images and assets can significantly reduce load times and enhance the performance of your application. Tools like WebP for images and code-splitting techniques for JavaScript and CSS can be highly effective.</p>
<p><strong>Example: Image Optimization</strong></p>
<p></p>
<pre class="language-javascript"><code>import React from 'react';

const OptimizedImage = () =&gt; {
  return (
    &lt;div&gt;
      &lt;img src="optimized-image.webp" alt="Optimized" /&gt;
    &lt;/div&gt;
  );
};

export default OptimizedImage;
</code></pre>
<p>The reason for optimizing images is to reduce their size without sacrificing quality, which leads to faster load times and improved performance. Optimized images consume less bandwidth, load quicker, and contribute to a smoother user experience.</p>
<h3>Code Splitting and Lazy Loading</h3>
<p>Code splitting and lazy loading are techniques to load only the necessary parts of your application when needed, thereby reducing the initial load time and improving performance.</p>
<p><strong>Example: Code Splitting with React.lazy()</strong></p>
<p></p>
<pre class="language-javascript"><code>import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() =&gt; import('./LazyComponent'));

const App = () =&gt; {
  return (
    &lt;div&gt;
      &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
        &lt;LazyComponent /&gt;
      &lt;/Suspense&gt;
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<p>By splitting the code and loading components only when they are needed, you can significantly reduce the initial load time and improve the overall performance of your application. This approach ensures that the browser is not overloaded with unnecessary scripts at the initial load, leading to a faster and more responsive user experience.</p>
<h3>Profile and Monitor Performance</h3>
<p>Using tools like React DevTools and other profiling instruments helps you monitor performance and identify bottlenecks in your application. Understanding where the performance issues lie allows you to focus your optimization efforts effectively.</p>
<p><strong>Here are simple steps for using React DevTools</strong></p>
<ol>
<li><strong>Install React DevTools</strong>: Add the React DevTools extension to your browser.</li>
<li><strong>Profile Your Application</strong>: Open your application in the browser, then open the DevTools panel. Go to the "Profiler" tab and start recording.</li>
<li><strong>Analyze the Results</strong>: Identify components that re-render frequently or take a long time to render. Optimize these components using techniques like memoization or pure components.</li>
</ol>
<p>The reason for profiling and monitoring performance is to gain insights into your application's behavior, allowing you to make data-driven decisions about where to optimize for the most significant performance gains.</p>
<h2>Conclusion</h2>
<p>React 19 brings a host of new features and improvements designed to enhance the performance of your applications. By leveraging the React Compiler, automatic batching, Server Components, and concurrent rendering, you can significantly optimize the performance of your React applications.</p>
<p>Remember to follow best practices such as avoiding inline functions and objects, using pure components, optimizing images and assets, and implementing code splitting and lazy loading. Additionally, use profiling tools to monitor and continuously improve your application's performance.</p>
<p>For further details, you can refer to the official <a href="https://reactjs.org/docs/getting-started.html">React documentation</a> and stay updated with the latest techniques.</p>
<p>Stay tuned for more articles in our series as we dive deeper into the exciting features of React 19. Happy coding!</p>
<div id="article_content" class="inner_article__entries__X3PKd">
<div id="article_content" class="inner_article__entries__X3PKd">
<div id="article_content" class="inner_article__entries__X3PKd">
<p style="text-align: right;"><em>&gt;&gt;&gt; Follow and Contact&nbsp;<a href="https://reliasoftware.com/">Relia Software</a> for more information!</em></p>
</div>
</div>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

<p>React 19 introduces some new features that can significantly aid in performance optimization, including: The React Compiler, Automatic Batching, Server Components,...</p>

Enhanced Techniques for Performance Optimization in React 19 | Relia Software

Enhanced Techniques for Performance Optimization in React 19

large_performance-optimization-in-react.webp

medium_performance-optimization-in-react.webp

small_performance-optimization-in-react.webp

thumbnail_performance-optimization-in-react.webp

performance-optimization-in-react.webp

<p>Hey there, React enthusiasts! Today, we will explore one of the <a href="https://reliasoftware.com/blog/new-features-and-improvements-in-react-19">key improvements in React 19</a>: enhanced <code>ref</code> management. This update aims to simplify the way we handle references in React applications, making our code cleaner and more efficient. Let's dive into what&rsquo;s new, how it works, and why it's a game-changer for developers working with <code>refs</code> in React.</p>
<p>&gt;&gt;&nbsp;<em>Read more:&nbsp;</em></p>
<ul>
<li><em>Delve into&nbsp;<a href="https://reliasoftware.com/blog/react-compiler">the React Compiler</a> to Optimize Your App in React 19</em></li>
<li><em><a class="blog_post__u0IVW" href="https://reliasoftware.com/blog/performance-optimization-in-react">Enhanced Techniques for Performance Optimization in React 19</a></em></li>
</ul>
<h2>What&rsquo;s New in ref Management?</h2>
<p>React 19 introduces several enhancements to <code>ref</code> management that streamline handling DOM elements and component instances. These changes include <strong>the ability to use <code>ref</code> as a prop in function components</strong> and <strong>the introduction of cleanup functions for <code>refs</code></strong>. These updates make it easier to manage references, especially in more complex component hierarchies.</p>
<h2>Using ref as a Prop</h2>
<p>One of the standout features in React 19 is the ability to pass <code>refs</code> directly as props to function components. This change simplifies the process of referencing DOM elements without the need for additional wrapper components or workarounds.</p>
<p><strong>Example: Managing Focus with <code>ref</code> as a Prop</strong></p>
<p>Imagine you have a form with multiple input fields, and you want to focus the next input field automatically when the current one is filled. Here&rsquo;s how you can achieve this using the new <code>ref</code> management features in React 19.</p>
<h3><strong>Before React 19: Manual Focus Management</strong></h3>
<pre class="language-javascript"><code>import React, { useRef } from 'react';

const InputField = ({ onFocusNext }) =&gt; {
  const inputRef = useRef();

  const handleKeyUp = (e) =&gt; {
    if (e.target.value.length === 1) {
      onFocusNext(inputRef.current);
    }
  };

  return &lt;input ref={inputRef} type="text" onKeyUp={handleKeyUp} /&gt;;
};

const App = () =&gt; {
  const inputRefs = [useRef(), useRef(), useRef()];

  const focusNextInput = (currentInput) =&gt; {
    const index = inputRefs.findIndex(ref =&gt; ref.current === currentInput);
    if (index &lt; inputRefs.length - 1) {
      inputRefs[index + 1].current.focus();
    }
  };

  return (
    &lt;div&gt;
      {inputRefs.map((ref, index) =&gt; (
        &lt;InputField key={index} ref={ref} onFocusNext={focusNextInput} /&gt;
      ))}
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<h3><span class="notion-enable-hover" data-token-index="0">After React 19: Simplified Focus Management</span></h3>
<pre class="language-javascript"><code>import React, { useRef } from 'react';

const InputField = React.forwardRef(({ onFocusNext }, ref) =&gt; {
  const handleKeyUp = (e) =&gt; {
    if (e.target.value.length === 1) {
      onFocusNext(ref.current);
    }
  };

  return &lt;input ref={ref} type="text" onKeyUp={handleKeyUp} /&gt;;
});

const App = () =&gt; {
  const inputRefs = [useRef(), useRef(), useRef()];

  const focusNextInput = (currentInput) =&gt; {
    const index = inputRefs.findIndex(ref =&gt; ref.current === currentInput);
    if (index &lt; inputRefs.length - 1) {
      inputRefs[index + 1].current.focus();
    }
  };

  return (
    &lt;div&gt;
      {inputRefs.map((ref, index) =&gt; (
        &lt;InputField key={index} ref={ref} onFocusNext={focusNextInput} /&gt;
      ))}
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<p>By passing the <code>ref</code> directly as a prop, React 19 simplifies the process, reducing boilerplate code and potential errors.</p>
<h2>Cleanup Functions for refs</h2>
<p>React 19 also introduces cleanup functions for <code>refs</code>, making it easier to handle references when components unmount. This feature is particularly useful for managing resources and ensuring that references do not linger after a component is removed from the DOM.</p>
<p><strong>Example: Cleanup with <code>ref</code></strong></p>
<p>Consider a scenario where you need to set up and clean up an event listener on a DOM element.</p>
<h3><strong>Before React 19: Manual Cleanup</strong></h3>
<pre class="language-javascript"><code>import React, { useRef, useEffect } from 'react';

const EventComponent = () =&gt; {
  const divRef = useRef();

  useEffect(() =&gt; {
    const handleClick = () =&gt; console.log('Div clicked');
    const divElement = divRef.current;
    divElement.addEventListener('click', handleClick);

    return () =&gt; {
      divElement.removeEventListener('click', handleClick);
    };
  }, []);

  return &lt;div ref={divRef}&gt;Click me&lt;/div&gt;;
};

export default EventComponent;
</code></pre>
<h3><span class="notion-enable-hover" data-token-index="0">After React 19: Simplified Cleanup</span></h3>
<pre class="language-javascript"><code>import React, { useRef, useEffect } from 'react';

const EventComponent = () =&gt; {
  const divRef = useRef();

  useEffect(() =&gt; {
    const handleClick = () =&gt; console.log('Div clicked');
    divRef.current.addEventListener('click', handleClick);

    return () =&gt; {
      divRef.current.removeEventListener('click', handleClick);
    };
  }, []);

  return &lt;div ref={divRef}&gt;Click me&lt;/div&gt;;
};

export default EventComponent;
</code></pre>
<p>This example shows how cleanup functions for <code>refs</code> can make the code more straightforward and less error-prone.</p>
<h2>Improved Interoperability with Function Components</h2>
<p>The ability to use <code>ref</code> as a prop in function components significantly improves the interoperability between different types of components. This change allows developers to pass <code>refs</code> seamlessly through component trees, enhancing the flexibility and reusability of components.</p>
<p><strong>Example: Nested Component Refs</strong></p>
<p>Imagine you have a nested component structure where you need to manage the focus of a deeply nested input field from a parent component.</p>
<h3><strong>Before React 19: Managing Nested Refs</strong></h3>
<pre class="language-javascript"><code>import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const NestedInput = forwardRef((props, ref) =&gt; {
  const inputRef = useRef();

  useImperativeHandle(ref, () =&gt; ({
    focus: () =&gt; {
      inputRef.current.focus();
    }
  }));

  return &lt;input ref={inputRef} type="text" /&gt;;
});

const ParentComponent = () =&gt; {
  const nestedInputRef = useRef();

  return (
    &lt;div&gt;
      &lt;NestedInput ref={nestedInputRef} /&gt;
      &lt;button onClick={() =&gt; nestedInputRef.current.focus()}&gt;Focus Input&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default ParentComponent;
</code></pre>
<h3><span class="notion-enable-hover" data-token-index="0">After React 19: Simplified Nested Refs</span></h3>
<pre class="language-javascript"><code>import React, { useRef, forwardRef } from 'react';

const NestedInput = forwardRef((props, ref) =&gt; {
  return &lt;input ref={ref} type="text" /&gt;;
});

const ParentComponent = () =&gt; {
  const nestedInputRef = useRef();

  return (
    &lt;div&gt;
      &lt;NestedInput ref={nestedInputRef} /&gt;
      &lt;button onClick={() =&gt; nestedInputRef.current.focus()}&gt;Focus Input&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default ParentComponent;
</code></pre>
<p>By allowing <code>ref</code> to be passed directly as a prop, React 19 simplifies the process of managing nested references, making the code cleaner and easier to maintain.</p>
<h2>Practical Use Cases and Benefits</h2>
<p>Enhanced <code>ref</code> management in React 19 brings several practical benefits to developers:</p>
<ul>
<li><strong>Simplified Codebase</strong>: By allowing <code>refs</code> to be used as props and introducing cleanup functions, the codebase becomes more streamlined and easier to read.</li>
<li><strong>Improved Maintainability</strong>: Reduced boilerplate code and fewer manual cleanups mean fewer opportunities for bugs and easier maintenance.</li>
<li><strong>Better Performance</strong>: Optimized handling of <code>refs</code> can lead to better performance, especially in complex applications with many references.</li>
<li><strong>Enhanced Reusability</strong>: Components become more reusable when <code>refs</code> can be passed through props, enabling more flexible component designs.</li>
</ul>
<p>&gt;&gt;&nbsp;<em>Read more about React:</em></p>
<ul>
<li><em>Mastering <a href="https://reliasoftware.com/blog/react-higher-order-components">React Higher-Order Components</a> (HOCs)</em></li>
<li><a href="https://reliasoftware.com/blog/react-suspense"><em>React Suspense for Mastering Asynchronous Data Fetching</em></a></li>
<li><em>Demystifying <a href="https://reliasoftware.com/blog/react-redux">React Redux for Centralized State Management</a></em></li>
<li><em>Mastering <a href="https://reliasoftware.com/blog/asynchronous-testing-with-react-testing-library">Asynchronous Testing with React Testing Library</a></em></li>
</ul>
<h2>Conclusion</h2>
<p>React 19's enhanced <code>ref</code> management brings significant improvements that simplify how we handle references in React applications. By allowing <code>refs</code> to be used as props and introducing cleanup functions, React 19 makes our code cleaner and more efficient. These enhancements are especially beneficial in complex applications where managing references can be a challenge.</p>
<p>Stay tuned as we explore more exciting features in React 19 in our upcoming articles. Happy coding!</p>
<div id="article_content" class="inner_article__entries__X3PKd">
<p style="text-align: right;"><em>&gt;&gt;&gt; Follow and Contact&nbsp;<a href="https://reliasoftware.com/">Relia Software</a> for more information!</em></p>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

<p>React 19 has some enhancements to <span class="notion-enable-hover" spellcheck="false" data-token-index="1">ref</span> management, including the ability to use <span class="notion-enable-hover" spellcheck="false" data-token-index="3">ref</span> as a prop in function components, and the introduction of cleanup functions. </p>

[React 19] Key Enhancements to Ref Management in React | Relia Software

Key Enhancements to Ref Management in React 19

large_ref-in-react-19.webp

medium_ref-in-react-19.webp

small_ref-in-react-19.webp

thumbnail_ref-in-react-19.webp

ref-in-react-19.webp

[React 19] Key Enhancements to Ref Management in React

<p>9 Best React Animation Libraries are: React Transition Group, React Reveal, Framer Motion, React Move, Anime.js, Remotion, React Spring, GreenSock, and React Motion.</p>

Top 9 Best React Animation Libraries for Web Developers | Relia Software

Top 9 Best React Animation Libraries for Web Developers

large_react-animation-libraries.webp

medium_react-animation-libraries.webp

small_react-animation-libraries.webp

thumbnail_react-animation-libraries.webp

react-animation-libraries.webp

<p>Hey there, React enthusiasts! Today, we're diving deep into one of the most <a href="https://reliasoftware.com/blog/new-features-and-improvements-in-react-19">exciting features introduced in React 19</a>: the React Compiler. This groundbreaking tool promises to enhance the performance of your React applications by transforming React code into optimized JavaScript. While the React Compiler significantly reduces the need for manual optimizations using <code><span class="notion-enable-hover" spellcheck="false" data-token-index="1">useMemo()</span></code>, <code><span class="notion-enable-hover" spellcheck="false" data-token-index="3">useCallback()</span></code>, and <code><span class="notion-enable-hover" spellcheck="false" data-token-index="5">memo</span></code>, there are still scenarios where these APIs can be beneficial. Let&rsquo;s explore the React Compiler, how it works, and why it&rsquo;s a game-changer for developers.</p>
<p>&gt;&gt;&nbsp;<em>Read more:</em></p>
<ul>
<li style="font-style: italic;"><em>[React 19] <a href="https://reliasoftware.com/blog/ref-in-react-19">Key Enhancements to Ref Management in React</a></em></li>
<li><em><a class="blog_post__u0IVW" href="https://reliasoftware.com/blog/performance-optimization-in-react">Enhanced Techniques for Performance Optimization in React 19</a></em></li>
<li style="font-style: italic;"><em>Mastering&nbsp;<a href="https://reliasoftware.com/blog/mastering-react-hooks">React Hooks</a>: Fundamentals for Beginners</em></li>
<li style="font-style: italic;"><em>Demystifying <a href="https://reliasoftware.com/blog/react-redux">React Redux for Centralized State Management</a></em></li>
<li style="font-style: italic;"><em>Mastering <a href="https://reliasoftware.com/blog/react-context-api">React Context API for Streamlined Data Sharing</a></em></li>
<li style="font-style: italic;">7 Best <a href="https://reliasoftware.com/blog/react-state-management-libraries">React State Management Libraries</a> for Any Project Size</li>
</ul>
<h2>What is the React Compiler?</h2>
<p><strong>The React Compiler is designed to take your React code and compile it into highly optimized JavaScript. </strong>This process significantly boosts the performance of your applications by reducing the overhead of frequent re-renders and ensuring that your components are rendered as efficiently as possible.</p>
<h2 data-sourcepos="30:1-30:47"><strong>The Challenge of Manual Optimizations</strong></h2>
<h3>The Manual Approach</h3>
<p>Traditionally, React does not automatically re-render components on state changes in the most optimal way. Developers have manually optimized these re-renders using hooks like <code>useMemo()</code>, <code>useCallback()</code> and <a href="https://reliasoftware.com/blog/react-higher-order-components">higher-order components</a> like <code>memo</code>. These tools help prevent unnecessary renders by memoizing values and callbacks, ensuring components only re-render when their inputs change.</p>
<p><strong>Example: </strong>Imagine an app fetching user-profiles and displaying their names and ages. This involves an expensive API call, so you must optimize how often it fetches data.</p>
<pre class="language-javascript"><code>import React, { useState, useMemo, useCallback } from 'react';

const UserProfile = React.memo(({ fetchUser, userId }) =&gt; {
  const user = useMemo(() =&gt; fetchUser(userId), [fetchUser, userId]);
  return (
    &lt;div&gt;
      &lt;p&gt;Name: {user.name}&lt;/p&gt;
      &lt;p&gt;Age: {user.age}&lt;/p&gt;
    &lt;/div&gt;
  );
});

const App = () =&gt; {
  const [userId, setUserId] = useState(1);

  const fetchUser = useCallback(id =&gt; {
    console.log('Fetching user...');
    // Simulate an API call
    return { name: `User ${id}`, age: 20 + id };
  }, []);

  return (
    &lt;div&gt;
      &lt;UserProfile fetchUser={fetchUser} userId={userId} /&gt;
      &lt;button onClick={() =&gt; setUserId(userId + 1)}&gt;Next User&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<p>In this example:</p>
<ul>
<li><code>useMemo()</code> is used to memoize the result of the <code>fetchUser</code> function, ensuring it's only recalculated when <code>userId</code> changes.</li>
<li><code>useCallback()</code> is used to memoize the <code>fetchUser</code> function, ensuring it's only recreated when necessary.</li>
<li><code>React.memo</code> is used to memoize the <code>UserProfile</code> component, ensuring it only re-renders when its props change.</li>
</ul>
<p>While effective, this approach is cumbersome and error-prone, especially in large applications with complex state management.</p>
<h3>The Vision for Automatic Optimization</h3>
<p>Recognizing the limitations and feedback from the community, the React team envisioned a world where React itself manages these optimizations. The goal was to remove the manual overhead and let React decide how and when to re-render components for optimal performance.</p>
<h2>Introducing the React Compiler</h2>
<p>The React Compiler will analyze your components and state changes to determine the most efficient way to update the UI. It will automatically decide which components need to be re-rendered and when, based on state changes and other dependencies.</p>
<p><strong>Example:&nbsp;</strong>Imagine the same user profile app but optimized by the React Compiler.</p>
<pre class="language-javascript"><code>import React, { useState } from 'react';

const UserProfile = ({ fetchUser, userId }) =&gt; {
  const user = fetchUser(userId);
  return (
    &lt;div&gt;
      &lt;p&gt;Name: {user.name}&lt;/p&gt;
      &lt;p&gt;Age: {user.age}&lt;/p&gt;
    &lt;/div&gt;
  );
};

const App = () =&gt; {
  const [userId, setUserId] = useState(1);

  return (
    &lt;div&gt;
      &lt;UserProfile fetchUser={id =&gt; ({ name: `User ${id}`, age: 20 + id })} userId={userId} /&gt;
      &lt;button onClick={() =&gt; setUserId(userId + 1)}&gt;Next User&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default App;
</code></pre>
<p>In this optimized version, there's no need for <code><span class="notion-enable-hover" spellcheck="false" data-token-index="1">useMemo()</span></code>, <code><span class="notion-enable-hover" spellcheck="false" data-token-index="3">useCallback()</span></code>, or <code><span class="notion-enable-hover" spellcheck="false" data-token-index="5">memo</span></code>. The React Compiler handles all the optimization internally.</p>
<h2>Current Status and Considerations of React Compiler</h2>
<p>Although the React Compiler has been in use in production at Meta in many high-traffic applications, it is still considered experimental for open-source projects due to differences in tech stacks. Consequently, bugs and errors may occur at runtime in your application.</p>
<p>There are a few broad categories of errors that can occur when using the React Compiler:</p>
<ul>
<li><strong>Runtime Errors or Incorrect Behavior</strong>: These may arise due to violations of the Rules of React that couldn't be caught statically.</li>
<li><strong>Runtime Infinite Loops and Over-Firing of Effects</strong>: These issues may occur if the compiler does not memoize dependencies to hooks in the exact same way as manual optimization.</li>
<li><strong>Build-Time Errors</strong>: These can be specific to your build pipeline and setup.</li>
</ul>
<p>The compiler can statically detect most cases where it isn't safe to compile a component or hook. For example, if it detects a violation of the Rules of React, it will safely skip over the offending components and hooks and continue compiling other files that are safe. However, due to the dynamic nature of JavaScript, it&rsquo;s not possible to catch all cases comprehensively. Bugs and undefined behavior, such as infinite loops, may still occur.</p>
<h2>Handling Errors and Debugging</h2>
<p>If you encounter runtime errors, you can use the <span class="notion-enable-hover" spellcheck="false" data-token-index="1">"<code>use no memo</code>"</span> directive to opt out components or hooks from being compiled by the React Compiler temporarily:</p>
<pre class="language-javascript"><code>function SuspiciousComponent() {
  "use no memo"; // opts out this component from being compiled by React Compiler
  // ...
}
</code></pre>
<p>This directive is a temporary escape hatch to help debug issues. If removing the directive resolves the error, report the issue using the React Compiler Playground so the React team can investigate and fix it.</p>
<p>&gt;&gt;&nbsp;<em>Read more:&nbsp;</em></p>
<ul>
<li class="LC20lb MBeuO DKV0Md"><em>Mastering <a href="https://reliasoftware.com/blog/asynchronous-testing-with-react-testing-library">Asynchronous Testing with React Testing Library</a></em></li>
<li class="LC20lb MBeuO DKV0Md"><em>Mastering <a href="https://reliasoftware.com/blog/axios-in-react-js">Axios in React.js for Effective API Management</a></em></li>
</ul>
<h2>Conclusion</h2>
<p>The React Compiler represents a significant leap forward in <a href="https://reliasoftware.com/blog/building-front-end-applications-with-react">React development</a>, automating the optimization of re-renders and simplifying the developer experience. While the compiler will handle most optimizations, understanding the traditional tools like <code>useMemo()</code>, <code>useCallback()</code>, and <code>memo</code> remains valuable. As the React ecosystem continues to evolve, the React Compiler will play a crucial role in making React applications faster and more efficient.</p>
<p>Stay tuned for its release in the upcoming versions of React and start planning how you can leverage it in your projects. Happy coding!</p>
<p>For more detailed information, refer to the official <a href="https://19.react.dev/learn/react-compiler">React Compiler documentation</a>.</p>
<p style="text-align: right;"><em>&gt;&gt;&gt; Follow and Contact&nbsp;<a href="https://reliasoftware.com/">Relia Software</a>&nbsp;for more information!</em></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p><strong></strong></p>
<p></p>

<p>The React Compiler is designed to take your React code and compile it into highly optimized JavaScript. This process significantly boosts your app performance.</p>

[React 19] Delve into the React Compiler to Optimize Your App | Relia Software

Delve into the React Compiler to Optimize Your App

large_react-compiler.webp

medium_react-compiler.webp

small_react-compiler.webp

thumbnail_react-compiler.webp

react-compiler.webp

[React 19] Delve into the React Compiler to Optimize Your App

<p>Hey there, React enthusiasts! Welcome to the first installment of our exciting series on React 19. This major release is packed with new features and improvements that promise to elevate your <a href="https://reliasoftware.com/blog/building-front-end-applications-with-react">React development</a> experience. From automated performance optimizations to innovative hooks and server-side enhancements, React 19 has something for everyone. This article will overview these groundbreaking features and set the stage for our upcoming deep dives. So, grab your favorite beverage, and let's embark on this journey through the future of React!</p>
<p>&gt;&gt;&nbsp;<em>Read more about React coding:</em></p>
<ul>
<li><em><a class="blog_post__u0IVW" href="https://reliasoftware.com/blog/performance-optimization-in-react">Enhanced Techniques for Performance Optimization in React 19</a></em></li>
<li><em>Demystifying&nbsp;<a href="https://reliasoftware.com/blog/react-redux">React Redux for Centralized State Management</a></em></li>
<li><em>Mastering <a href="https://reliasoftware.com/blog/mastering-react-query">React Query</a>: Simplify Your React Data Flow</em></li>
<li><em>Mastering <a href="https://reliasoftware.com/blog/react-higher-order-components">React Higher-Order Components</a> (HOCs)</em></li>
</ul>
<h2>React Compiler</h2>
<p>One of the most revolutionary additions to React 19 is the <a href="https://reliasoftware.com/blog/react-compiler">React Compiler</a>. Historically, optimizing re-renders in React required manual interventions using <code>useMemo()</code>, <code>useCallback()</code>, and <code>memo</code>. While effective, this approach was often cumbersome and error-prone, especially in large applications with complex state management. The React Compiler aims to automate these optimizations, reducing the need for manual performance tuning and making your codebase cleaner and more maintainable.</p>
<p><strong>How It Works?</strong></p>
<p>The React Compiler analyzes your components and state changes to determine the most efficient way to update the UI. It decides which components need to be re-rendered and when based on state changes and other dependencies. This not only enhances performance but also simplifies your development process.</p>
<ul>
<li><strong>Example: Manual Optimization</strong></li>
</ul>
<pre class="language-javascript"><code>import React, { useState, useMemo, useCallback } from 'react';

const ExpensiveComponent = React.memo(({ compute, a, b }) =&gt; {
  const result = useMemo(() =&gt; compute(a, b), [compute, a, b]);
  return &lt;div&gt;Result: {result}&lt;/div&gt;;
});

const App = () =&gt; {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  const handleClick = useCallback(() =&gt; setA(a + 1), [a]);

  return (
    &lt;div&gt;
      &lt;ExpensiveComponent compute={(x, y) =&gt; x + y} a={a} b={b} /&gt;
      &lt;button onClick={handleClick}&gt;Increment A&lt;/button&gt;
      &lt;button onClick={() =&gt; setB(b + 1)}&gt;Increment B&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default App;</code></pre>
<ul>
<li><strong><span class="notion-enable-hover" data-token-index="0">Example: Optimized by React Compiler</span></strong></li>
</ul>
<pre class="language-javascript"><code>import React, { useState } from 'react';

const ExpensiveComponent = ({ compute, a, b }) =&gt; {
  const result = compute(a, b);
  return &lt;div&gt;Result: {result}&lt;/div&gt;;
};

const App = () =&gt; {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  return (
    &lt;div&gt;
      &lt;ExpensiveComponent compute={(x, y) =&gt; x + y} a={a} b={b} /&gt;
      &lt;button onClick={() =&gt; setA(a + 1)}&gt;Increment A&lt;/button&gt;
      &lt;button onClick={() =&gt; setB(b + 1)}&gt;Increment B&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default App;</code></pre>
<p>In this optimized version, there's no need for <code><span class="notion-enable-hover" spellcheck="false" data-token-index="1">useMemo()</span></code>, <code><span class="notion-enable-hover" spellcheck="false" data-token-index="3">useCallback()</span></code>, or <code><span class="notion-enable-hover" spellcheck="false" data-token-index="5">memo</span></code>. The React Compiler handles all the optimization internally.</p>
<p>&gt;&gt;&nbsp;<em>You may consider: </em><em>Mastering <a href="https://reliasoftware.com/blog/react-test-renderer">React Test Renderer for Streamlined Testing</a></em></p>
<h2>Server Components</h2>
<p>Another standout feature in React 19 is Server Components. This addition allows developers to render components on the server, significantly enhancing performance by reducing the load on the client. <a href="https://reliasoftware.com/blog/react-server-components">Server Components</a> can run once at build time on your CI server, or they can be executed for each request using a web server.</p>
<p>Benefits of Server Components:</p>
<ul>
<li><strong>Enhanced Performance</strong>: By offloading rendering tasks to the server, Server Components reduce the computational burden on the client, resulting in faster load times and a smoother user experience.</li>
<li><strong>Better Resource Utilization</strong>: Server Components can leverage server resources more efficiently, which is particularly beneficial for applications with heavy data processing requirements.</li>
<li><strong>Seamless Integration</strong>: Server Components integrate smoothly with existing React infrastructure, making it easier to adopt without significant changes to your codebase.</li>
</ul>
<h2>Automatic Batching</h2>
<p>React 19 introduces automatic batching, a feature that groups multiple state updates into a single render, reducing unnecessary re-renders and improving performance. This means you no longer need to rely on hacks or workarounds to batch state updates manually.</p>
<p><strong>How Automatic Batching Works?</strong></p>
<p>When multiple state updates are triggered within the same event loop, React 19 batches them together and processes them in a single render cycle. This optimization reduces the number of renders, leading to improved performance and a more responsive UI.</p>
<h2>The New use API</h2>
<p>The new <code>use</code> API in React 19 simplifies reading context and managing state, even allowing for conditional usage, which was not possible with <code>useContext</code>. This API enhances the flexibility and readability of your code by allowing you to consume context values in a more intuitive and dynamic way.</p>
<p><strong>Example of the <code>use</code> API:</strong></p>
<pre class="language-javascript"><code>import { use } from 'react';
import ThemeContext from './ThemeContext';

function Heading({ children }) {
  if (children == null) {
    return null;
  }
  const theme = use(ThemeContext);
  return (
    &lt;h1 style={{ color: theme.color }}&gt;
      {children}
    &lt;/h1&gt;
  );
}
</code></pre>
<p>In this example, the <span class="notion-enable-hover" spellcheck="false" data-token-index="1">use</span> API allows for conditional context consumption, making it easier to manage and apply context values based on dynamic conditions.</p>
<p>&gt;&gt;&nbsp;<em>Read more: </em><em>Mastering <a href="https://reliasoftware.com/blog/react-context-api">React Context API for Streamlined Data Sharing</a></em></p>
<h2>Concurrent Rendering</h2>
<p>Concurrent rendering in React 19 is a game-changer for improving the responsiveness of your applications. By allowing React to prepare multiple versions of the UI simultaneously, concurrent rendering ensures that high-priority updates are processed first, enhancing the user experience under heavy load.</p>
<p>Key Benefits of Concurrent Rendering:</p>
<ul>
<li><strong>Improved Responsiveness</strong>: High-priority tasks are processed first, ensuring a smoother and more responsive UI.</li>
<li><strong>Better User Experience</strong>: By reducing the time users spend waiting for updates to reflect, concurrent rendering significantly improves the overall user experience.</li>
<li><strong>Optimized Resource Utilization</strong>: Concurrent rendering makes better use of system resources, particularly in complex applications with extensive state management.</li>
</ul>
<h2>Server Actions</h2>
<p>Server Actions in React 19 bridge the gap between client and server seamlessly. They allow client components to call asynchronous functions executed on the server, making it easier to manage complex interactions and data flows between the client and server.</p>
<p><strong>How Server Actions Work?</strong></p>
<p>When a Server Action is defined with the <code>"use server"</code> directive, your framework automatically creates a reference to the server function and passes it to the client component. This enables the client to call the server function directly, with React handling the request and response seamlessly.</p>
<h2>Enhanced Error Handling and Debugging</h2>
<p>React 19 introduces significant improvements in error handling and debugging, making it easier to maintain and debug your applications. These enhancements include better hydration error messages and build-time error detection, helping you identify and resolve issues more efficiently.</p>
<h3>Improved Hydration Error Messages</h3>
<p>When a hydration error occurs, React 19 provides more detailed and actionable error messages, making it easier to diagnose and fix issues related to server-side rendering.</p>
<h3>Build-Time Error Detection</h3>
<p>React 19's build-time error detection helps you catch issues early in the development process, reducing the likelihood of runtime errors and improving the overall stability of your applications.</p>
<h2>New Hooks</h2>
<p>React 19 introduces several new hooks that provide more <a href="https://reliasoftware.com/blog/react-component-library">tools for developers to manage state</a> and side effects efficiently. These hooks include:</p>
<ul>
<li><strong><code>useId</code></strong>: Generates unique IDs for components, ensuring consistency and uniqueness across renders.</li>
<li><strong><code>useFormStatus</code></strong>: Provides real-time status updates for form fields, enhancing form handling and validation.</li>
<li><strong><code>useSyncExternalStore</code></strong>: Ensures that your component stays in sync with an external store, improving state management in complex applications.</li>
</ul>
<p>&gt;&gt;&nbsp;<em>Read more: <a href="https://reliasoftware.com/blog/mastering-react-hooks">Mastering React Hooks</a>: Fundamentals for Beginners</em></p>
<h2>Improved ref Management</h2>
<p>React 19 brings <a href="https://reliasoftware.com/blog/ref-in-react-19">changes to <span class="notion-enable-hover" spellcheck="false" data-token-index="1">ref</span> management</a>, allowing you to use <span class="notion-enable-hover" spellcheck="false" data-token-index="3">ref</span> as a prop in function components and introducing cleanup functions for refs. These enhancements simplify reference handling and improve the flexibility of your component structures.</p>
<p>Example of New <code><span class="notion-enable-hover" spellcheck="false" data-token-index="1">ref</span></code> Management:</p>
<pre class="language-javascript"><code>function MyInput({ placeholder, ref }) {
  return &lt;input placeholder={placeholder} ref={ref} /&gt;;
}

const App = () =&gt; {
  const inputRef = useRef();

  return &lt;MyInput ref={inputRef} /&gt;;
};
</code></pre>
<p>In this example, the <code><span class="notion-enable-hover" spellcheck="false" data-token-index="1">ref</span></code> is passed directly as a prop to the <code><span class="notion-enable-hover" spellcheck="false" data-token-index="3">MyInput</span></code> component, simplifying the process of referencing DOM elements in function components.</p>
<h2>Best Practices When&nbsp;Upgrading to React 19</h2>
<p>Upgrading your existing React projects to React 19 can be smooth and straightforward if you follow <a href="https://react.dev/blog/2024/04/25/react-19">the best practices and guidelines provided by the React team</a>. Ensure you test thoroughly, update dependencies, and leverage new features to maximize the benefits of this major release.</p>
<h2>Conclusion</h2>
<p>React 19 is a monumental release that brings a host of new features and improvements designed to enhance your development experience and application performance. From the groundbreaking React Compiler to the innovative new hooks and server-side capabilities, React 19 offers tools and optimizations that will make your projects more efficient, maintainable, and performant.</p>
<p>Stay tuned as we dive deeper into each of these features in our upcoming articles. Follow along to get the most out of React 19. Happy coding!</p>
<div id="article_content" class="inner_article__entries__X3PKd">
<div id="article_content" class="inner_article__entries__X3PKd">
<p style="text-align: right;"><em>&gt;&gt;&gt; Follow and Contact&nbsp;<a href="https://reliasoftware.com/">Relia Software</a> for more information!</em></p>
</div>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

<p>Key Features of React 19 are: React Compiler, Server Components, New Hooks, Automatic Batching, The New&nbsp;<span class="notion-enable-hover" spellcheck="false" data-token-index="1">use</span> API, Concurrent Rendering, Server Actions, etc.</p>

React 19: An Overview of the New Features and Improvements | Relia Software

Deep Dive into the New Features and Improvements in React 19

large_new-features-in-react-19.webp

medium_new-features-in-react-19.webp

small_new-features-in-react-19.webp

thumbnail_new-features-in-react-19.webp

new-features-in-react-19.webp

React 19: An Overview of the New Features and Improvements

<p>Asynchronous operations are a fundamental part of modern web applications. From fetching data via API calls to handling delayed updates with <code>setTimeout</code>, these operations ensure that our applications are dynamic and responsive. However, testing these asynchronous behaviors can be challenging and error-prone. This article will explore techniques and best practices for mastering asynchronous testing with React Testing Library (RTL).</p>
<p>Asynchronous testing ensures that your application behaves correctly under various conditions. Without proper testing, async operations can lead to unexpected bugs and a frustrating user experience. React Testing Library provides powerful tools to handle asynchronous interactions, making your tests more reliable and maintainable.</p>
<p>&gt;&gt;&nbsp;<em>Read more:</em></p>
<ul>
<li><em>Mastering <a href="https://reliasoftware.com/blog/react-test-renderer">React Test Renderer for Streamlined Testing</a></em></li>
<li><em><a class="seoquake-params-link" href="https://reliasoftware.com/blog/react-suspense" rel="7e1191b3 x_url" data-ved="2ahUKEwjvt_uuxcaGAxVDh1YBHXDwIns4ChAWegQICxAB">React Suspense for Mastering Asynchronous Data Fetching</a></em></li>
</ul>
<h2>Understanding Asynchronous Testing</h2>
<p>Asynchronous testing involves a scenario where operations don't execute immediately but are complete at some point. It's like a puzzle where you must test API calls, timers, and user interactions that trigger asynchronous state updates.</p>
<p>This can be tricky because it faces common challenges, including:</p>
<ul>
<li><strong>Timing Issues:</strong> Ensuring that tests wait for asynchronous operations to complete before asserting.</li>
<li><strong>Flaky Tests:</strong> Tests that sometimes pass or fail due to timing inconsistencies.</li>
<li><strong>Complexity:</strong> Managing multiple async operations and their outcomes in a single test.</li>
</ul>
<p>To better understand these concepts, let's visually represent the typical flow of asynchronous operations in <a href="https://reliasoftware.com/blog/react-component-library">React components</a>. This diagram illustrates the sequence from triggering an async operation to handling its results and re-rendering the component. It will help clarify the steps and challenges involved in asynchronous testing.</p>
<figure class="image"><img src="../../../../uploads/the_typical_flow_of_asynchronous_operations_in_react_components_47ba94becd.webp" alt="the typical flow of asynchronous operations in React components." width="849" height="838">
<figcaption>The typical flow of asynchronous operations in React components.</figcaption>
</figure>
<p>This diagram shows how various asynchronous operations interact within a React component, providing a clearer picture of the entire process. This understanding is essential as we dive deeper into the tools and techniques used to manage these operations effectively.</p>
<h2>Key Concepts and Tools</h2>
<h3><strong>waitFor</strong></h3>
<p><code>waitFor</code> is a utility provided by RTL that repeatedly calls a callback until it stops throwing an error or a timeout is reached. This is useful for waiting for async operations to complete.</p>
<pre class="language-javascript"><code>import { render, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import FetchComponent from './FetchComponent';

test('displays data after fetch', async () =&gt; {
  render(&lt;FetchComponent /&gt;);

  // Wait for the data to be loaded and displayed
  await waitFor(() =&gt; expect(screen.getByText('Data loaded')).toBeInTheDocument());
});
</code></pre>
<h3><strong>findBy Queries</strong></h3>
<p><code>findBy</code> queries are a combination of <code>getBy</code> queries and <code>waitFor</code>. They wait for an element to appear in the DOM and are more straightforward for common cases.</p>
<pre class="language-javascript"><code>test('displays data after fetch', async () =&gt; {
  render(&lt;FetchComponent /&gt;);

  // Wait for the data to be loaded and displayed
  expect(await screen.findByText('Data loaded')).toBeInTheDocument();
});
</code></pre>
<h3><strong>Mock Service Worker (MSW)</strong></h3>
<p>MSW is a powerful tool for mocking API requests in tests. It provides a way to declaratively mock API responses and is highly recommended for testing async operations that involve network requests.</p>
<p></p>
<p>&gt;&gt;&nbsp;<em>Read more: </em><em>Mastering <a href="https://reliasoftware.com/blog/react-context-api">React Context API for Streamlined Data Sharing</a></em></p>
<h2>Testing API Calls</h2>
<p>API calls are a common source of asynchronous behavior in <a href="https://reliasoftware.com/blog/building-front-end-applications-with-react">React applications</a>. Properly testing these calls is crucial to ensure your components correctly handle data fetching and error scenarios. Here's how to test components that make API calls using React Testing Library (RTL) and Mock Service Worker (MSW).</p>
<h3><strong>Step 1: Setting Up MSW</strong></h3>
<p>First, install MSW to mock API requests in your tests.</p>
<p></p>
<pre class="language-javascript"><code>npm install msw --save-dev
</code></pre>
<p>Next, create a server configuration file. This file defines the API endpoints and their responses, enabling you to control the behavior of your mocked server.</p>
<pre class="language-javascript"><code>// src/mocks/server.js
import { setupServer } from 'msw/node';
import { rest } from 'msw';

export const server = setupServer(
  rest.get('/api/data', (req, res, ctx) =&gt; {
    return res(ctx.json({ message: 'Data loaded' }));
  })
);
</code></pre>
<h3>Step 2:&nbsp;<strong>Using MSW in Tests</strong></h3>
<p>To ensure that MSW is properly set up for your tests, configure it to start before all tests and reset handlers after each test. This configuration ensures a clean state for every test run.</p>
<pre class="language-javascript"><code>// src/setupTests.js
import { server } from './mocks/server';
import '@testing-library/jest-dom';

beforeAll(() =&gt; server.listen());
afterEach(() =&gt; server.resetHandlers());
afterAll(() =&gt; server.close());
</code></pre>
<h3><strong>Step 3: Writing the Test</strong></h3>
<p>With MSW set up, you can now write tests for components that make API calls. Use RTL's&nbsp;<code>render</code> and <code>screen</code> utilities to verify that your component behaves as expected when fetching data.</p>
<pre class="language-javascript"><code>import { render, screen } from '@testing-library/react';
import FetchComponent from './FetchComponent';

test('displays data after fetch', async () =&gt; {
  render(&lt;FetchComponent /&gt;);

  // Wait for the data to be loaded and displayed
  expect(await screen.findByText('Data loaded')).toBeInTheDocument();
});
</code></pre>
<p>To better visualize these steps, refer to the flowchart below. This diagram illustrates the process of setting up MSW and writing a test for an API call, providing a clear overview of each stage involved.</p>
<p></p>
<figure class="image"><img src="../../../../uploads/the_process_of_setting_up_msw_and_writing_a_test_for_an_api_call_0e1a692cfd.webp" alt="the process of setting up MSW and writing a test for an API call" width="737" height="1172">
<figcaption>The process of setting up MSW and writing a test for an API call.</figcaption>
</figure>
<p>By following these steps and using the visual guide, you can effectively set up MSW and write robust tests for your React components that depend on asynchronous API calls. This ensures your components can handle various scenarios, improving the reliability and maintainability of your application.</p>
<p>&gt;&gt;&nbsp;<em>Read more:&nbsp;</em></p>
<ul>
<li><em>Mastering <a href="https://reliasoftware.com/blog/axios-in-react-js">Axios in React.js for Effective API Management</a></em></li>
<li style="font-style: italic;"><em>What is tRPC? <a href="https://reliasoftware.com/blog/what-is-trpc">Building Robust APIs with TypeScript and tRPC</a></em></li>
</ul>
<h2>Handling Delayed Updates</h2>
<p>Components often need to handle delayed updates, such as showing a loading spinner while waiting for data or performing an action after a timeout.</p>
<h3><strong>Testing setTimeout</strong></h3>
<p>To test delayed updates, you can use <code>jest.useFakeTimers</code> to control the timing of your tests.</p>
<pre class="language-javascript"><code>import { render, screen } from '@testing-library/react';
import DelayedComponent from './DelayedComponent';

test('displays message after delay', () =&gt; {
  jest.useFakeTimers();
  render(&lt;DelayedComponent /&gt;);

  jest.advanceTimersByTime(5000);

  expect(screen.getByText('Delayed message')).toBeInTheDocument();
  jest.useRealTimers();
});
</code></pre>
<h3><strong>Testing Loading States</strong></h3>
<p>Testing components that show a loading state while waiting for async operations can be done using <code>waitFor</code> and <code>findBy</code> queries.</p>
<p></p>
<pre class="language-javascript"><code>import { render, screen } from '@testing-library/react';
import LoadingComponent from './LoadingComponent';

test('displays loading spinner and then data', async () =&gt; {
  render(&lt;LoadingComponent /&gt;);

  // Check for the loading state
  expect(screen.getByText('Loading...')).toBeInTheDocument();

  // Wait for the data to be loaded and displayed
  expect(await screen.findByText('Data loaded')).toBeInTheDocument();
});
</code></pre>
<h2>Best Practices for Asynchronous Testing</h2>
<h3><strong>Use Appropriate Queries</strong></h3>
<ul>
<li><strong><code>findBy</code> Queries:</strong> Use <code>findBy</code> for elements that will appear asynchronously.</li>
<li><strong><code>waitFor</code>:</strong> Use <code>waitFor</code> when you need more control over when to make assertions.</li>
</ul>
<p><em>&gt;&gt; You may consider: </em><em>Mastering <a href="https://reliasoftware.com/blog/mastering-react-query">React Query</a>: Simplify Your React Data Flow</em></p>
<h3><strong>Avoid Flaky Tests</strong></h3>
<ul>
<li><strong>Ensure Deterministic Behavior:</strong> Control async operations using tools like MSW and fake timers.</li>
<li><strong>Use Timeouts Wisely:</strong> Adjust timeouts based on the expected duration of async operations.</li>
</ul>
<h3><strong>Keep Tests Maintainable</strong></h3>
<ul>
<li><strong>Abstract Repetitive Code:</strong> Use custom render functions to encapsulate standard setups.</li>
</ul>
<pre class="language-javascript"><code>const customRender = (ui, options) =&gt;
  render(ui, { wrapper: MyContextProvider, ...options });

export * from '@testing-library/react';
export { customRender as render };
</code></pre>
<ul>
<li><strong><span class="notion-enable-hover" data-token-index="0">Mock External Dependencies:</span></strong> Use MSW to mock API responses consistently.</li>
</ul>
<h3><strong>Debugging Async Tests</strong></h3>
<ul>
<li><strong>Use <code>screen.debug()</code>:</strong> Print the current state of the DOM to help diagnose issues.</li>
<li><strong>Check Timing Issues:</strong> Ensure assertions are made after completing async operations.</li>
</ul>
<h2>Conclusion</h2>
<p>Mastering asynchronous testing with React Testing Library can significantly enhance the reliability and maintainability of your tests. Understanding the common challenges and leveraging tools like <code>waitFor</code>, <code>findBy</code> queries, and MSW makes your testing process smoother and boosts your confidence in handling asynchronous operations effectively.</p>
<p>If you're ready to elevate your async testing skills, start by integrating React Testing Library and MSW into your test suite. Experimenting with <code>waitFor</code> and <code>findBy</code> queries will enable you to manage asynchronous operations more efficiently. Additionally, the <a href="https://testing-library.com/docs/react-testing-library/intro">official documentation</a> is always available for more advanced techniques and best practices, providing a reassuring safety net.</p>
<p>Implement these techniques in your projects to see a noticeable improvement in your testing outcomes. Ensuring that your applications are functional, resilient, and user-friendly will significantly contribute to the success of your projects. Happy testing!</p>
<p></p>
<p style="text-align: right;"><em>&gt;&gt;&gt; Follow and Contact&nbsp;<a href="https://reliasoftware.com/">Relia Software</a>&nbsp;for more information!</em></p>
<p></p>
<p></p>
<p></p>

<p>Mastering asynchronous testing with React Testing Library can significantly enhance the reliability and maintainability of your tests. Delve into this guide to level up your apps.</p>

Mastering Asynchronous Testing with React Testing Library | Relia Software

Mastering Asynchronous Testing with React Testing Library

large_asynchronous-testing-with-react-testing-library.webp

medium_asynchronous-testing-with-react-testing-library.webp

small_asynchronous-testing-with-react-testing-library.webp

thumbnail_asynchronous-testing-with-react-testing-library.webp

asynchronous-testing-with-react-testing-library.webp

<p>Hey there, <a href="https://reliasoftware.com/blog/hire-dedicated-reactjs-developers">React developers</a>! If you're building apps that need to communicate with servers (and let's face it, who isn't?), you've probably encountered the challenge of managing API requests. But worry not; Axios is here to save the day! This superhero of HTTP clients for JavaScript is promise-based, super flexible, and packed with features that make API management a breeze. Let's explore why Axios is the perfect replacement for <code>fetch</code> and how it can boost your confidence in writing cleaner and more effective code.</p>
<p><em>&gt;&gt; Read more about React:</em></p>
<ul>
<li><em>An In-Depth Guide for <a href="https://reliasoftware.com/blog/building-front-end-applications-with-react">Front-End Development with React</a></em></li>
<li><em>7 Best <a href="https://reliasoftware.com/blog/react-state-management-libraries">React State Management Libraries</a> for Any Project Size</em></li>
<li><em>Top 6 Best <a href="https://reliasoftware.com/blog/react-component-library">React Component Libraries</a> for Your Projects</em></li>
</ul>
<h2>What Makes Axios the Perfect Replacement for <code>fetch</code>?</h2>
<p>The <code>fetch</code> API is a standard go-to when handling HTTP requests in JavaScript. But let's be honest, <code>fetch</code> can be a bit&hellip; bare-bones. Here's why Axios is often a better choice.</p>
<h3>Ease of Use and Simplicity</h3>
<p>With <code>fetch</code>, you have to handle response parsing manually, which can become cumbersome. Axios, on the other hand, automatically transforms JSON data. Here's a quick comparison:</p>
<ul>
<li>Using <code><span class="notion-enable-hover" spellcheck="false" data-token-index="1">fetch</span></code></li>
</ul>
<pre class="language-javascript"><code>fetch('&lt;https://dummyjson.com/users&gt;')
  .then(response =&gt; response.json())
  .then(data =&gt; console.log(data))
  .catch(error =&gt; console.error('Error:', error));
</code></pre>
<ul>
<li>Using Axios</li>
</ul>
<pre class="language-javascript"><code>axios.get('&lt;https://dummyjson.com/users&gt;')
  .then(response =&gt; console.log(response.data))
  .catch(error =&gt; console.error('Error:', error));
</code></pre>
<p>It's clear to see that Axios offers a concise way to handle HTTP requests, reducing redundant code. It returns promises for better asynchronous code readability, improving <a href="https://reliasoftware.com/blog/why-is-web-development-so-important">web development</a> efficiency.</p>
<h3>Built-in Features</h3>
<p>Axios, superior to <code>fetch</code>, streamlines HTTP requests with built-in features like automatic JSON data transformation, request and response interceptors, <a href="https://reliasoftware.com/blog/react-error-boundary">robust error handling</a>, and default configuration settings. While both support request cancellation via <code>AbortController</code>, Axios simplifies API management with its flexible API.</p>
<p>The table below highlights the key differences between Axios and <code>fetch</code>, showcasing why Axios is often the better choice for managing API requests in JavaScript applications:</p>
<p></p>
<table style="border-collapse: collapse; width: 84.0862%; border: 1px solid rgb(0, 0, 0);" border="1"><colgroup><col style="width: 36.0024%;"><col style="width: 30.2228%;"><col style="width: 33.7334%;"></colgroup>
<tbody>
<tr>
<td style="width: 30.2813%; border-color: rgb(0, 0, 0); height: 19.6px; text-align: center; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;"><strong>Feature</strong></div>
</td>
<td style="width: 34.8417%; border-color: rgb(0, 0, 0); height: 19.6px; text-align: center; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;"><strong>Axios</strong></div>
</td>
<td style="width: 34.6593%; border-color: rgb(0, 0, 0); height: 19.6px; text-align: center; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;"><strong>fetch</strong></div>
</td>
</tr>
<tr>
<td style="width: 30.2813%; border-color: rgb(0, 0, 0); text-align: center; height: 39.2px; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;"><strong>Automatic JSON Data Transformation</strong></div>
</td>
<td style="width: 34.8417%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;">Yes</div>
</td>
<td style="width: 34.6593%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell">No, manual transformation required</div>
</td>
</tr>
<tr>
<td style="width: 30.2813%; border-color: rgb(0, 0, 0); height: 39.2px; text-align: center; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;"><strong>Request and Response Interceptors</strong></div>
</td>
<td style="width: 34.8417%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;">Yes</div>
</td>
<td style="width: 34.6593%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell">No, must handle manually</div>
</td>
</tr>
<tr>
<td style="width: 30.2813%; border-color: rgb(0, 0, 0); height: 39.2px; text-align: center; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;"><strong>Error Handling</strong></div>
</td>
<td style="width: 34.8417%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell">Powerful error handling with catch blocks</div>
</td>
<td style="width: 34.6593%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell">Limited to basic error handling</div>
</td>
</tr>
<tr>
<td style="width: 30.2813%; border-color: rgb(0, 0, 0); height: 39.2px; text-align: center; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;"><strong>Request Cancellation</strong></div>
</td>
<td style="width: 34.8417%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell">Supports AbortController</div>
</td>
<td style="width: 34.6593%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell">Supports AbortController</div>
</td>
</tr>
<tr>
<td style="width: 30.2813%; border-color: rgb(0, 0, 0); height: 39.2px; text-align: center; border-width: 1px;">
<div class="notion-table-cell" style="text-align: center;"><strong>Default Configurations</strong></div>
</td>
<td style="width: 34.8417%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell">Allows setting default base URLs and headers</div>
</td>
<td style="width: 34.6593%; border-color: rgb(0, 0, 0); height: 39.2px; border-width: 1px;">
<div class="notion-table-cell">No, must configure manually for each request</div>
</td>
</tr>
</tbody>
</table>
<h2>Why Axios is Considered Effective?</h2>
<h3>Consistent and Clean API Calls</h3>
<p>Axios allows you to create <a href="https://axios-http.com/docs/instance">instances</a> with custom configurations, ensuring consistent and clean API calls throughout your application.</p>
<p>Creating an Axios instance:</p>
<pre class="language-javascript"><code>import axios from 'axios';

const api = axios.create({
  baseURL: '&lt;https://api.example.com&gt;',
  timeout: 1000,
  headers: {'Authorization': 'Bearer yourToken'}
});

export default api;
</code></pre>
<p>With this setup, every request you make with this instance will have the same base URL, timeout, and headers.</p>
<h3>Interceptors for Request and Response Manipulation</h3>
<p>Interceptors in Axios act like the secret agents of your HTTP requests, allowing you to intercept and modify requests and responses. This is perfect for adding authentication tokens or handling specific status codes globally.</p>
<p>Example:</p>
<pre class="language-javascript"><code>api.interceptors.request.use(
  config =&gt; {
    config.headers['Authorization'] = 'Bearer yourToken';
    return config;
  },
  error =&gt; {
    return Promise.reject(error);
  }
);

api.interceptors.response.use(
  response =&gt; response,
  error =&gt; {
    if (error.response.status === 401) {
      // Handle unauthorized errors
    }
    return Promise.reject(error);
  }
);
</code></pre>
<h3>Cancellation of Requests</h3>
<p>Axios supports <code>AbortController</code> for request cancellation, making it easier and more aligned with modern JavaScript practices.</p>
<p>Example using <code>AbortController</code>:</p>
<pre class="language-javascript"><code>// Create an instance of AbortController
const controller = new AbortController();

// Make an Axios GET request with the AbortController's signal
api.get('/users', {
  signal: controller.signal
})
.then(response =&gt; {
  console.log(response.data);
})
.catch(error =&gt; {
  if (error.name === 'AbortError') {
    // Handle the request cancellation error
    console.log('Request was canceled');
  } else {
    // Handle other errors
    console.error('Error:', error);
  }
});

// Cancel the request by calling the abort method on the controller
controller.abort();
</code></pre>
<p>This functionality is handy for scenarios where you might need to cancel outdated or unnecessary API calls, improving the overall performance and responsiveness of your React application.</p>
<p>Refer to the flowchart below to further illustrate how request cancellation works in Axios using AbortController. This diagram visualizes the process, from creating the <code>AbortController</code> and making the request with the controller's signal to handling both the successful completion and the cancellation of the request.</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<figure class="image align-center"><img style="display: block; margin-left: auto; margin-right: auto;" src="../../../../uploads/how_request_cancellation_works_in_axios_using_abortcontroller_b80db0543a.webp" alt=" the flowchart illustrates how request cancellation works in Axios using AbortController." width="1024" height="763">
<figcaption>The flowchart illustrates how request cancellation works in Axios using AbortController. (Source: Internet)</figcaption>
</figure>
<h3>Default Configurations</h3>
<p>Are you tired of repeating yourself? Set up default configurations in Axios to maintain consistency and reduce redundancy in your code.</p>
<p>Example:</p>
<pre class="language-javascript"><code>axios.defaults.baseURL = '&lt;https://api.example.com&gt;';
axios.defaults.headers.common['Authorization'] = 'Bearer yourToken';
axios.defaults.headers.post['Content-Type'] = 'application/json';
</code></pre>
<p>With these defaults, your API requests will always be configured correctly, reducing boilerplate code and streamlining your <a href="https://reliasoftware.com/blog/software-testing-life-cycle">development process</a>.</p>
<h2>Structuring Code Effectively with Axios</h2>
<h3>Creating and Exporting an Axios Instance</h3>
<p>Setting up a custom Axios instance helps maintain consistency across your application.</p>
<p>Example:</p>
<pre class="language-javascript"><code>import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;
</code></pre>
<h3>Using Interceptors for Cross-Cutting Concerns</h3>
<p>Interceptors are perfect for handling tasks like adding authentication tokens to every request or managing global response scenarios.</p>
<p>Example:</p>
<pre class="language-javascript"><code>api.interceptors.request.use(
  config =&gt; {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error =&gt; {
    return Promise.reject(error);
  }
);
</code></pre>
<h3>Organizing API Calls into Services</h3>
<p>Structure your API calls into service modules for better maintainability.</p>
<p>Example of a User Service Module:</p>
<pre class="language-javascript"><code>// userService.js
import api from './api';

const getUsers = () =&gt; api.get('/users');
const getUserById = (id) =&gt; api.get(`/users/${id}`);
const createUser = (userData) =&gt; api.post('/users', userData);
const updateUser = (id, userData) =&gt; api.put(`/users/${id}`, userData);
const deleteUser = (id) =&gt; api.delete(`/users/${id}`);

export { getUsers, getUserById, createUser, updateUser, deleteUser };
</code></pre>
<h2>Real-World Example</h2>
<p><strong>Integrating Axios with a Backend API</strong></p>
<p>Let's integrate Axios with a backend API, focusing on authentication and token management. Suppose we have an authentication endpoint that returns a token, and we need to refresh this token periodically.</p>
<p>Example:</p>
<pre class="language-javascript"><code>// api.js
import axios from 'axios';

const api = axios.create({
  baseURL: '&lt;https://api.example.com&gt;',
});

// Request Interceptor: Check for a stored token and inject it into the Authorization header
api.interceptors.request.use(
  config =&gt; {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error =&gt; {
    return Promise.reject(error);
  }
);

// Response Interceptor: Handle 401 errors by refreshing the token and retrying the request
api.interceptors.response.use(
  response =&gt; response,
  async error =&gt; {
    const originalRequest = error.config;
    if (error.response.status === 401 &amp;&amp; !originalRequest._retry) {
      originalRequest._retry = true;
      const refreshToken = localStorage.getItem('refreshToken');
      const { data } = await axios.post('&lt;https://api.example.com/refresh&gt;', { token: refreshToken });
      localStorage.setItem('token', data.token);
      api.defaults.headers.common['Authorization'] = `Bearer ${data.token}`;
      return api(originalRequest);
    }
    return Promise.reject(error);
  }
);

export default api;

</code></pre>
<p>In this example, we set up two crucial interceptors to manage token authentication effectively:</p>
<ul>
<li><strong>Request Interceptor</strong>: This interceptor checks for a stored token in the local storage and, if found, injects it into the Authorization header of every outgoing request. This ensures that all API calls made through this Axios instance are authenticated without requiring manual intervention for each request.</li>
<li><strong>Response Interceptor</strong>: This interceptor handles cases where the server responds with a 401 Unauthorized error. When such an error occurs, and if a refresh token exists, the interceptor attempts to refresh the access token by calling a separate API endpoint. If the token refresh is successful, the new token is stored in local storage, and the original request is retried with the new token. This automatic token refresh mechanism ensures seamless authentication without user intervention, providing a smoother user experience.</li>
</ul>
<p>By incorporating these interceptors, you can ensure that your API requests remain authenticated and handle token expiration gracefully. This setup reduces the need for repetitive code and makes your application more robust and secure.</p>
<p>&gt;&gt; <em>You may be interested in React coding topics:</em></p>
<ul>
<li><em>The Best <a href="https://reliasoftware.com/blog/react-design-patterns">React Design Patterns</a> with Code Examples</em></li>
<li><em>Demystifying <a href="Demystifying%20React%20Redux%20for%20Centralized%20State%20Management">React Redux for Centralized State Management</a></em></li>
<li><em>A Comprehensive Guide for <a href="A%20Comprehensive%20Guide%20for%20React%20Server%20Components">React Server Components</a></em></li>
<li><em>Mastering <a href="https://reliasoftware.com/blog/react-test-renderer">React Test Renderer</a> for Streamlined Testing</em></li>
<li><em><a href="https://reliasoftware.com/blog/mastering-react-hooks">Mastering React Hooks</a>: Fundamentals for Beginners</em></li>
<li><em>Mastering <a href="https://reliasoftware.com/blog/react-higher-order-components">React Higher-Order Components</a> (HOCs)</em></li>
<li><em><a href="https://reliasoftware.com/blog/tailwind-css-react">Tailwind CSS for React UI Components</a>: Practical Code Examples</em></li>
</ul>
<h2>Conclusion</h2>
<p>And there you have it! Axios makes managing API requests in React a walk in the park. With powerful features like interceptors, request cancellation using <code>AbortController</code>, and default configurations, Axios helps you keep your application efficient, clean, and reliable. Whether you're dealing with complex scenarios like token management or want a hassle-free way to handle HTTP requests, Axios is the tool you need. So go ahead, give it a try, and watch your API management become a whole lot easier and more fun!</p>
<p>By incorporating these advanced features and structuring your code effectively, you can leverage the full power of Axios to build robust and responsive React applications. Happy coding!</p>
<div id="article_content" class="inner_article__entries__X3PKd">
<div id="article_content" class="inner_article__entries__X3PKd">
<p dir="ltr" style="text-align: right;"><em>&gt;&gt;&gt; Follow and Contact&nbsp;<a href="https://reliasoftware.com/">Relia Software</a> for more information!</em></p>
</div>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

<p>Axios, the superhero of HTTP clients for JavaScript, is promise-based, super flexible, and packed with features that solve the challenge of managing API requests.</p>

Mastering Axios in React.js for Effective API Management | Relia Software

Mastering Axios in React.js for Effective API Management

large_axios-in-react-js.webp

medium_axios-in-react-js.webp

small_axios-in-react-js.webp

thumbnail_axios-in-react-js.webp

axios-in-react-js.webp

featured

software-development.webp

Software Development

outsourcing.webp

Outsourcing

software-as-service-business.webp

Business

automation.webp

Automation

artificial-intelligence.webp

AI/ML

Relia Software is a leading software development company based in Vietnam and Canada. We offer reliable custom software development and outsourcing services to clients in USA and worldwide. Transform your ideas into reality with our innovative solutions.

Relia Software: Trusted Partner for Custom Software Development Services

ogp.jpg

<p dir="ltr">At Relia Software, we believe in the power of design thinking &ndash; a human-centered approach to problem-solving. It's about understanding your users' needs, brainstorming innovative solutions, and iterating on ideas to create exceptional software experiences.&nbsp;</p>
<p dir="ltr">Our Design Thinking Services empower you to uncover deep user needs, turn ideas into action, and create intuitive UX/UI. Are you ready to develop software that delights your users?</p>

<p>Stop guessing, start understanding. We use design thinking to crack user needs, craft intuitive interfaces, and build apps that win hearts.</p>

design-thinking.png

<span>Design</span> Thinking

design-thinking.webp

UX/UI Design Services

Relia Software is a top UX/UI Design Company that stands by to a design-driven approach. Checkout for our Web and Mobile Application UX/UI Design Services here!

UX/UI Design Agency | Web & Mobile App Design | Relia Software

MVP Development Services

Relia Software offers Minimum Viable Product (MVP) development services for businesses of all sizes. Our leading criteria are: agile, cost-effective, and value-loaded.

MVP Development Company | Relia Software

Full-Stack Web Development Services

Relia Software offers a full-stack website development service to ensure a solid online presence of your business in the evolving digital landscape.

Web Development Company | Relia Software

<p dir="ltr">Mobile apps are increasingly crucial in today's fast-paced society. They allow us to stay in touch, get the news, and get things done on the go.&nbsp;</p>
<p dir="ltr">At Relia Software, we understand the immense potential mobile apps hold for businesses like yours. Therefore, we offer comprehensive Mobile App Development Services to realize your vision. Our expert developers, designers, and strategists work with you to build a stunning mobile app with exceptional features and user experience.</p>
<p dir="ltr">Don't miss out on the mobile potential for your business growth. Let's chat about your app vision and see how we can help!</p>

<p>We build scalable, responsive applications that grow with you. Our experts handle everything, from user-friendly interfaces to robust back-end systems.</p>

App development.png

<span>Mobile App</span> Development

mobile-app-development.png

Custom Mobile App Development Services

At Relia Software, we specialize in custom mobile app development, creating holistic solutions that perfectly align with your unique business goals and target audience.

Custom Mobile App Development Company | Relia Software

Enterprise App Development

We design our project-based end-to-end development services for the enterprise. Relia holds the experience to deliver mobile products that are successful and consistent in results.

Enterprise App Development | Relia Software

Flutter App Development Services

Relia Software is a Flutter app development company with a decade of experience in the mobile app development industry. We build robust Flutter solutions to clients.

Flutter App Development Company | Relia Software

iOS App Development Services

Over the last decade, Relia Software has built a reputation as a go-to iOS app development company, serving clients in various industries. Explore our services here!

iOS App Development Company | Relia Software

Android App Development Services

Relia Software offers a full spectrum of Android app development services to cater to your unique needs. We will help you launch your project on Apple platforms.

Android App Development Company | Relia Software

Cross-Platform App Development Services

Relia Software specializes in cross-platform app development, creating high-quality apps for Android and iOS devices. We use frameworks like React Native and Flutter.

Cross-Platform App Development Company | Relia Software

React Native App Development Services

At the forefront of React Native development, Relia Software delivers cutting-edge mobile apps for both Android and iOS platforms. Check out our React Native services!

React Native App Development Company | Relia Software

<p dir="ltr">The future is intelligent, and artificial intelligence (AI) is at the forefront of innovation. At Relia Software, we help businesses leverage the power of AI to solve complex problems, automate tasks, and gain valuable insights. Our team of experienced developers, data scientists, and strategists collaborate closely with you to create intelligent solutions tailored to your unique needs.</p>
<p dir="ltr">Embrace the future with AI. Let's collaborate to bring your groundbreaking ideas to life and set your business on the path to success!</p>

<p dir="ltr">AI isn't sci-fi anymore. We build intelligent solutions that automate tasks, gain insights, and unlock new chances. Let's make your business smarter!</p>

ai-development-icon.webp

<span>AI</span> Development

ai-development-image.webp

Digital Transformation Consulting Services

At Relia Software, we offer comprehensive digital transformation consulting services, giving clients a technology-powered plan to improve business processes.

Digital Transformation Consulting Company | Relia Software

AI/ML Consulting & Development Services

AI/ML Consulting & Development Company | Relia Software

<p dir="ltr">With over a decade of experience, Relia empowers you with DevOps as a Service (DaaS) to streamline your software development lifecycle. We automate the entire delivery pipeline across top cloud platforms, enabling continuous integration and development (CI/CD) for faster deployments and smoother workflows.&nbsp;</p>
<p dir="ltr">Integrate your development and operations teams with cloud-based DevOps automation to achieve peak performance and effortless application onboarding. Partner with Relia and unlock the power of DevOps for your business!</p>

<p>Let&rsquo;s unleash the power of DevOps. We automate your software pipeline, smash deployment times, and keep your teams in sync &ndash; all on the cloud.</p>

devops-service.png

<span>DevOps</span> Services

devops.webp

DevOps Automation Services

As a DevOps services company with over 11 years of experience, Relia may bring value to your product from start to finish.

DevOps Services And Solutions

<p dir="ltr">Relia Software understands that building a top-notch development team can be challenging. Our Software Development Outsourcing Services offer a cost-effective and flexible solution to fulfill your project needs. We connect you with a pool of talented developers worldwide, optimize your development process, and achieve your business goals.</p>
<p dir="ltr">Need a full development crew? We've got you covered. Looking for specific expertise? We can source it. Our range of engagement models, from outsourcing to dedicated teams, gives you the perfect fit. Contact us today!</p>

<p>You want to build a top tech team? We will help you access global talent, optimize workflows, and achieve your goals &ndash; all under your budget.</p>

offshore-team.png

<span>Software Development</span> Outsourcing

software-development-outsourcing.webp

Offshore Development Center Services

For over a decade, Relia Software has been empowering businesses of all sizes and fields with robust and scalable Offshore Development Center (ODC) solutions.

Offshore Development Center Services | Viet Nam | Relia Software

Software Support & Maintenance Services

Relia Software offers superior software maintenance and support services for optimal efficiency, security, performance, and better user experience. Contact us!

Software Support & Maintenance Services | Relia Software

Dedicated Software Development Team Services

Relia Software specializes in building dedicated development teams that seamlessly integrate into your project, becoming a true extension of your in-house force.

Dedicated Software Development Team Services | Relia Software

IT Staff Augmentation Services

Relia has been a trusted partner in Staff Augmentation for 10+ years. We've a streamlined process to seamlessly integrate skilled experts into your existing team.

IT Staff Augmentation Services | Relia Software

Build-Operate-Transfer (BOT) Services

The Build-Operate-Transfer model (BOT model) lets you stay competitive and successful in the market. Your ODC team should be reliable to work with.

Build-Operate-Transfer (BOT) Services | Relia Software

Software Development Outsourcing Services

At Relia, we've spent over a decade cultivating a reputation for excellence in outsourced software development. Our weapon is a dream team of skilled developers.

Solutions We Provide

Articles by Nhan Nguyen