{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/121","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"The GitHub CLI is a recent GitHub released tool that takes tasks of issue / PR management to the terminal. It will be a useful tool that…","fields":{"slug":"/engineering/github-cli-tool/"},"html":"<p><em>The <a href=\"https://cli.github.com/\">GitHub CLI</a> is a recent GitHub released tool that takes tasks of issue / PR management to the terminal. It will be a useful tool that will put more of our workflow for software creation into the textual domain rather than the visual domain. It’s just called <code>gh</code>.</em></p>\n<p>*<strong>*Installation of GitHub CLI 💡**</strong></p>\n<p>GitHub CLI has releases with significant operating systems, visit the installation page and find instructions on how to install GitHub CLI for your operating system.</p>\n<p>For [Windows] and [macOS], you will use the package managers to update and maintain GitHub CLI, and for <a href=\"https://github.com/cli/cli/releases/tag/v1.0.0\">Linux</a> users, you may need to grab the software from the latest release website.</p>\n<p>Here are examples of the installation instructions for each compatible platform:</p>\n<p>→ Windows</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">scoop bucket add github-gh https://github.com/cli/scoop-gh.gitscoop install gh</span></span></code></pre>\n<p>→ macOS</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">brew install github</span></span></code></pre>\n<p>→ Debian/Ubuntu Linux</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">sudo apt install git &amp;&amp; sudo dpkg -i gh_*_linux_amd64.deb</span></span></code></pre>\n<p>→ Fedora/Centos Linux</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">sudo yum localinstall gh_*_linux_amd64.rpm</span></span></code></pre>\n<p>→ Arch Linux</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">yay -S github-cli</span></span></code></pre>\n<p>You’ll need to authenticate your account after you install GitHub CLI. Running any command would activate this process of authentication(via OAuth). Well, you can use Git CLI.\n<img src=\"/c544032f3e88cc5209a8125c3b27f776/Authorize.webp\" alt=\"Auhtorize\"></p>\n<p>*<strong>*What is CLI really doing? 🤔**</strong></p>\n<p>The GitHub CLI lets you handle issues/ PRs / repositories from inside your console. Let’s have a look at it:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">gh issue [status, list, view, create]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">gh pr [status, list, view, checkout, create]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">gh repo [view, create, clone, fork]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">gh </span><span class=\"mtk11\">help</span></span></code></pre>\n<p><img src=\"/bfff3e4e4d8d95ee5e5250d51865507a/ghpr.webp\" alt=\"gh pr status\"></p>\n<p><em>It should be said that gh is not the same stuff as git. It’s because <code>gh</code> just adds GitHub tools to the terminal. Version management is yet to be managed with git.</em></p>\n<p>*<strong>*CLI Commands ➫**</strong></p>\n<p>We’re going to cover a bunch of exciting commands. Let’s use the official <a href=\"https://github.com/angular/angular\">Angular.js repo</a> to run <code>gh</code> commands</p>\n<p>Clone the <code>Angular</code> repo, and navigate to the repository. You can either clone the repo through HTTPS/ ssh/ Git CLI. I’m going to clone the repo through <code>git CLI</code> since we are working on GIT CLI.</p>\n<p>Let’s execute the <code>$gh issue --help</code> see what commands are available.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">gh issue --help  </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">Work with GitHub issues</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">USAGE</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  gh issue &lt;command&gt; [flags]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">CORE COMMANDS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  close:      Close issue</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  create:     Create a new issue</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  list:       List and filter issues </span><span class=\"mtk15\">in</span><span class=\"mtk1\"> this repository</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  reopen:     Reopen issue</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  status:     Show the status of relevant issues</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  view:       View an issue</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">FLAGS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  -R, --repo OWNER/REPO   Select another repository using the OWNER/REPO format</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">INHERITED FLAGS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  --help   Show </span><span class=\"mtk11\">help</span><span class=\"mtk1\"> </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> </span><span class=\"mtk11\">command</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">ARGUMENTS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  An issue can be supplied as an argument </span><span class=\"mtk15\">in</span><span class=\"mtk1\"> any of the following </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  formats:</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  - by number, e.g. </span><span class=\"mtk8\">&quot;123&quot;</span><span class=\"mtk1\">; or</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  - by URL, e.g. </span><span class=\"mtk8\">&quot;https://github.com/OWNER/REPO/issues/123&quot;</span><span class=\"mtk1\">.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">EXAMPLES</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh issue list</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh issue create --label bug</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh issue view --web</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">LEARN MORE</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Use </span><span class=\"mtk8\">&#39;gh &lt;command&gt; &lt;subcommand&gt; --help&#39;</span><span class=\"mtk1\"> </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> more information about a command.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Read the manual at https://cli.github.com/manual</span></span></code></pre>\n<p>It’s Time to view Problems/issues in the angular repo.😁</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">gh issue list</span></span></code></pre>\n<p><img src=\"/a8c6b14edbb42faabcbec7dcfef82a15/angular%20issue.webp\" alt=\"Angular issue\"></p>\n<p>*<strong>*Pull Requests 🤖**</strong></p>\n<p>It is now possible to build a Pull Request (PR) on the terminal. You will perform <code>$gh pr create</code> right after you have committed a feature or bug branch. This interactively creates the pull request.😉</p>\n<p>Let’s execute the <code>$gh pr --help</code> see what commands are available.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"8\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">Work with GitHub pull requests</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">USAGE</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  gh pr &lt;command&gt; [flags]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">CORE COMMANDS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  checkout:   Check out a pull request </span><span class=\"mtk15\">in</span><span class=\"mtk1\"> git</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  checks:     Show CI status </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> a single pull request</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  close:      Close a pull request</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  create:     Create a pull request</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  diff:       View changes </span><span class=\"mtk15\">in</span><span class=\"mtk1\"> a pull request</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  list:       List and filter pull requests </span><span class=\"mtk15\">in</span><span class=\"mtk1\"> this repository</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  merge:      Merge a pull request</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  ready:      Mark a pull request as ready </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> review</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  reopen:     Reopen a pull request</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  review:     Add a review to a pull request</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  status:     Show status of relevant pull requests</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  view:       View a pull request</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">FLAGS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  -R, --repo OWNER/REPO   Select another repository using the OWNER/REPO format</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">INHERITED FLAGS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  --help   Show </span><span class=\"mtk11\">help</span><span class=\"mtk1\"> </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> </span><span class=\"mtk11\">command</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">ARGUMENTS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  A pull request can be supplied as an argument </span><span class=\"mtk15\">in</span><span class=\"mtk1\"> any of the following formats:</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  - by number, e.g. </span><span class=\"mtk8\">&quot;123&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  - by URL, e.g. </span><span class=\"mtk8\">&quot;https://github.com/OWNER/REPO/pull/123&quot;</span><span class=\"mtk1\">; or</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  - by the name of its head branch, e.g. </span><span class=\"mtk8\">&quot;patch-1&quot;</span><span class=\"mtk1\"> or </span><span class=\"mtk8\">&quot;OWNER:patch-1&quot;</span><span class=\"mtk1\">.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">EXAMPLES</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh pr checkout 353</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh pr create --fill</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh pr view --web</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">LEARN MORE</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Use </span><span class=\"mtk8\">&#39;gh &lt;command&gt; &lt;subcommand&gt; --help&#39;</span><span class=\"mtk1\"> </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> more information about a command.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Read the manual at https://cli.github.com/manual</span></span></code></pre>\n<p><strong>**</strong>Let’s view some of it:👀<strong>**</strong></p>\n<p>current PR’s in the repo:</p>\n<p><code>$ gh pr list</code>\n<img src=\"/a66b580d697bfaaa40b84a7e84b04dc3/angular%20pr.webp\" alt=\"Angular pullrequest\"></p>\n<p><strong>*</strong>Let’s view an individual pr:<strong>*</strong></p>\n<p>I’m going with the first pull request <code>#38899</code>. Through gh cmd $ gh pr view <code>38899</code>.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"9\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">refactor(compiler): simplify visitor logic </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> attributes</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">Draft • atscott wants to merge 1 commit into master from testrefactor</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">Labels: cla: yes, comp: compiler, state: WIP, target: patch</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">Milestone: needsTriage</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">The logic </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> computing identifiers, specifically </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> bound attributes can  </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  be simplified by using the value span of the binding rather than the </span><span class=\"mtk11\">source</span><span class=\"mtk1\"> span.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">View this pull request on GitHub: https://github.com/angular/angular/pull/38899</span></span></code></pre>\n<p>*<strong>*Repository 🤖**</strong></p>\n<p>Let’s execute the <code>$gh repo --help</code> see what commands are available</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"10\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">Work with GitHub repositories</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">USAGE</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  gh repo &lt;command&gt; [flags]</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">CORE COMMANDS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  clone:      Clone a repository locally</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  create:     Create a new repository</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  fork:       Create a fork of a repository</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  view:       View a repository</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">INHERITED FLAGS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  --help   Show </span><span class=\"mtk11\">help</span><span class=\"mtk1\"> </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> </span><span class=\"mtk11\">command</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">ARGUMENTS</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  A repository can be supplied as an argument </span><span class=\"mtk15\">in</span><span class=\"mtk1\"> any of the following formats:</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  - </span><span class=\"mtk8\">&quot;OWNER/REPO&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  - by URL, e.g. </span><span class=\"mtk8\">&quot;https://github.com/OWNER/REPO&quot;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">EXAMPLES</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh repo create</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh repo clone cli/cli</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  $ gh repo view --web</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">LEARN MORE</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Use </span><span class=\"mtk8\">&#39;gh &lt;command&gt; &lt;subcommand&gt; --help&#39;</span><span class=\"mtk1\"> </span><span class=\"mtk15\">for</span><span class=\"mtk1\"> more information about a command.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  Read the manual at https://cli.github.com/manual</span></span></code></pre>\n<p>It is better to clone a repository using the gh command than with the git command. I have done this above. Only through gh cmd, I have cloned angular repo.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"11\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">$ gh repo clone angular/angular</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">$ gh repo fork</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">- Forking angular/angular...</span></span></code></pre>\n<p>Start functioning. You should create a new PR after this (<code>$gh pr create</code>)! It’s sort of remarkable that all of that element is now available in the terminal!😍</p>\n<p>*<strong>*Gist 🐱‍🚀**</strong></p>\n<p>It is now simple to create a gist on GitHub from the terminal using the CLI cmd.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"bash\" data-index=\"12\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">gh gist create &lt; file &gt;</span></span></code></pre>\n<p>*<strong>*Conclusion🙀**</strong></p>\n<p><a href=\"https://cli.github.com/\">Git CLI's</a> primary objective is to \"minimize context switching\" by allowing you to continue inside your terminal/console, rather than opening your browser to access <a href=\"https://github.com/\">GitHub</a>. For additional functionality and knowledge on using the current resources, you may link to the <a href=\"https://cli.github.com/manual/\">manual</a>.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n</style>","frontmatter":{"date":"October 05, 2020","updated_date":null,"description":"Learn about GitHub CLI tool and how/when to use it","title":"GitHub CLI Tool ⚒","tags":["Cloud","GIT","Version control"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5384615384615385,"src":"/static/67f9c8247a3c5142d5ef1f220d1e512a/89989/GitHub%20CLI%20Tool.webp","srcSet":"/static/67f9c8247a3c5142d5ef1f220d1e512a/61e93/GitHub%20CLI%20Tool.webp 200w,\n/static/67f9c8247a3c5142d5ef1f220d1e512a/1f5c5/GitHub%20CLI%20Tool.webp 400w,\n/static/67f9c8247a3c5142d5ef1f220d1e512a/89989/GitHub%20CLI%20Tool.webp 757w","sizes":"(max-width: 757px) 100vw, 757px"}}},"author":{"id":"Saravanan Vijayamuthu","github":"SaravananVijayamuthu","avatar":null}}}},{"node":{"excerpt":"Overview You may have come across the term- “lazy loading in React”, but most of you won’t be familiar with exactly what is lazy loading in…","fields":{"slug":"/engineering/lazy-loading-in-react/"},"html":"<h3 id=\"overview\" style=\"position:relative;\"><a href=\"#overview\" aria-label=\"overview permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Overview</h3>\n<p>You may have come across the term- “lazy loading in React”, but most of you won’t be familiar with exactly what is lazy loading in React. Lazy loading is not a new concept. It has been available for quite some time. In essence, lazy loading means that a component or a part of code must get loaded when it is required. It is also referred to as <code>code splitting</code> and <code>data fetching</code>. Now, the next question is, how to do lazy loading in react​? </p>\n<p>Talking about <code>React</code> specifically, it bundles the complete code and deploys all of it at the same time. Now, usually, that's not a bad idea, since React SPAs (Single page application) are quite small and do not affect the performance. But what if we have a gigantic application, like a content management system with a customer portal, admin portal etc. In such a case, it does not seem like a smart idea to load the complete application.</p>\n<ul>\n<li>It will be a huge application and will cost a lot of unnecessary data transfer which can lead to slow loading of the website.</li>\n<li>A customer login, will not have access to admin specific features, so loading it is a waste of memory and time.</li>\n</ul>\n<p>In this post, I will try to explain the advantages of lazy loading in react and how to implement it in <code>React</code>.</p>\n<h3 id=\"advantages\" style=\"position:relative;\"><a href=\"#advantages\" aria-label=\"advantages permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Advantages</h3>\n<p>In situations where we know that certain code/features will not be accessible to all the users or the user does not access it frequently, it is best to load them when the user requests for it. This improves user experience as well as initial loading time.</p>\n<p>For example, let's consider that our application has two sections, <code>A</code> and <code>B</code>. Size of A is 1 MB and its loading time is approximately 1 second. Size of B is also 1 MB and so its loading time is also 1 second. And we know that a user will access either of the sections, or a user accessing section A will rarely access section B and vice versa. If we were to load the complete application at the starting of our application, it would cost the user 2 MB of data and the loading time will also be 2 seconds. The user might not like to wait for 2 seconds or won't be happy that a site is costing them a lot of data. This can be improved and halved with proper lazy loading through  lazy load react components.</p>\n<blockquote>\n<p>Note: This is not the general case. Small single-page applications are usually in kbs.</p>\n</blockquote>\n<h3 id=\"prerequisites\" style=\"position:relative;\"><a href=\"#prerequisites\" aria-label=\"prerequisites permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Prerequisites</h3>\n<p>To follow this tutorial, you’ll need the following:</p>\n<ul>\n<li><a href=\"https://nodejs.org/en/download/\"><strong>Latest Node version</strong></a> installed</li>\n<li>\n<p><code>create-react-app</code> tool </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">npm install -g create-react-app</span></code></pre>\n</li>\n</ul>\n<h3 id=\"general-instructions\" style=\"position:relative;\"><a href=\"#general-instructions\" aria-label=\"general instructions permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>General instructions</h3>\n<ol>\n<li>We will perform lazy loading in React with react suspense and without it.</li>\n<li>\n<p>First of all, create the app using <code>npm create-react-app</code> </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">npm create-react-app my-app</span></code></pre>\n</li>\n<li>\n<p>Now run the app by running following command in the project directory root</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">npm start</span></code></pre>\n</li>\n<li>The default react app will run in <code>http://localhost:3000</code></li>\n<li>\n<p>Let the directory structure be </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">|</span>\n<span class=\"grvsc-line\">|-src</span>\n<span class=\"grvsc-line\">|\t|-components</span>\n<span class=\"grvsc-line\">|\t|\t|-Admin.js</span>\n<span class=\"grvsc-line\">|\t|\t|-Customer.js</span>\n<span class=\"grvsc-line\">|\t|\t|-Home.js</span>\n<span class=\"grvsc-line\">|\t|-app.js</span>\n<span class=\"grvsc-line\">|-index.js</span></code></pre>\n</li>\n<li>Application will first render <code>app.js</code> which will have an input field. We will pass the input received as props to Home, and render <code>Home.js</code>. Based on props received, we will either render <code>Admin</code> or <code>Customer</code>.</li>\n</ol>\n<h3 id=\"using-react-suspense-react-166\" style=\"position:relative;\"><a href=\"#using-react-suspense-react-166\" aria-label=\"using react suspense react 166 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Using React Suspense (<code>React 16.6+</code>)</h3>\n<p>From React 16.6+, react added <a href=\"https://reactjs.org/docs/react-api.html#reactsuspense\">React Suspense</a> which performs lazy loading.</p>\n<ol>\n<li>\n<p>In our <code>Home.js</code>, we will lazy load Admin and Customer</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">React</span><span class=\"mtk1\">, { </span><span class=\"mtk12\">Suspense</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;react&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Customer</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">React</span><span class=\"mtk1\">.</span><span class=\"mtk11\">lazy</span><span class=\"mtk1\">(() </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk4\">import</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;./Customer.js&quot;</span><span class=\"mtk1\">));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Admin</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">React</span><span class=\"mtk1\">.</span><span class=\"mtk11\">lazy</span><span class=\"mtk1\">(() </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk4\">import</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;./Admin.js&quot;</span><span class=\"mtk1\">));</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">//Instead of regular import statements, we will use the above approach for lazy loading</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t</span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&quot;admin&quot;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk3\">// fallback component is rendered until our main component is loaded</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Suspense</span><span class=\"mtk1\"> </span><span class=\"mtk12\">fallback</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Loading</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk4\">}</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t\t</span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Admin</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">Suspense</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t} </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&quot;customer&quot;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Suspense</span><span class=\"mtk1\"> </span><span class=\"mtk12\">fallback</span><span class=\"mtk1\">=</span><span class=\"mtk4\">{</span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">Loading</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk4\">}</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t\t</span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Customer</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk10\">Suspense</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t} </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> Invalid User </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span></code></pre>\n</li>\n</ol>\n<h3 id=\"without-react-suspense\" style=\"position:relative;\"><a href=\"#without-react-suspense\" aria-label=\"without react suspense permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Without React Suspense</h3>\n<p>When talking about react lazy loading, if you are working with React version prior to 16.6, you won't have the Suspense component. It is best to upgrade to the latest version and use Suspense. If you're not able to upgrade and still want this feature, it is still possible to create your own React Suspense component. I will be using <a href=\"https://reactjs.org/docs/higher-order-components.html\">Higher Order Component(HOC)</a>. </p>\n<ul>\n<li>\n<p>Our HOC (<code>lazyLoader.js</code>)</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">lazyLoader</span><span class=\"mtk1\"> = (</span><span class=\"mtk12\">importComp</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk4\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk10\">React</span><span class=\"mtk1\">.</span><span class=\"mtk10\">Component</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk12\">state</span><span class=\"mtk1\">: {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk12\">component</span><span class=\"mtk1\">: </span><span class=\"mtk10\">null</span><span class=\"mtk1\">; </span><span class=\"mtk3\">//initializing state</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t};</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk3\">//loading the component and setting it to state</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk11\">componentDidMount</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk11\">importComp</span><span class=\"mtk1\">().</span><span class=\"mtk11\">then</span><span class=\"mtk1\">((</span><span class=\"mtk12\">comp</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk11\">setState</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">component:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">comp</span><span class=\"mtk1\">.</span><span class=\"mtk12\">default</span><span class=\"mtk1\"> }));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk3\">//rendering the component</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk11\">render</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">C</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">state</span><span class=\"mtk1\">.</span><span class=\"mtk12\">component</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">C</span><span class=\"mtk1\"> ? </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">C</span><span class=\"mtk1\"> </span><span class=\"mtk4\">{</span><span class=\"mtk1\">...</span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">props</span><span class=\"mtk4\">}</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span><span class=\"mtk1\"> : </span><span class=\"mtk4\">null</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t};</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">lazyLoader</span><span class=\"mtk1\">;</span></span></code></pre>\n</li>\n<li>\n<p>Our calling component, in this case <code>Home.js</code></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> </span><span class=\"mtk12\">React</span><span class=\"mtk1\"> </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;react&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">import</span><span class=\"mtk1\"> { </span><span class=\"mtk12\">lazyLoader</span><span class=\"mtk1\"> } </span><span class=\"mtk15\">from</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;./lazyLoader&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Customer</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">lazyLoader</span><span class=\"mtk1\">(() </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk4\">import</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;./Customer.js&quot;</span><span class=\"mtk1\">));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">Admin</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">lazyLoader</span><span class=\"mtk1\">(() </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk4\">import</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;./Admin.js&quot;</span><span class=\"mtk1\">));</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">//Instead of regular import statements, we will use the above approach for lazy loading</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t</span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&quot;admin&quot;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Admin</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t} </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">props</span><span class=\"mtk1\">.</span><span class=\"mtk12\">user</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&quot;customer&quot;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">Customer</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t} </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\"> Invalid User </span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span></code></pre>\n<p>This was all about how to implement lazy loading in react,  if you need the fallback feature, you can update HOC's render method where it is returning null. Instead of null, you can return your fallback component, and it can be passed as props too.</p>\n<p>Now our HOC would look like - </p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk11\">lazyLoader</span><span class=\"mtk1\"> = (</span><span class=\"mtk12\">importComp</span><span class=\"mtk1\">, </span><span class=\"mtk12\">fallback</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk4\">extends</span><span class=\"mtk1\"> </span><span class=\"mtk10\">React</span><span class=\"mtk1\">.</span><span class=\"mtk10\">Component</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk12\">state</span><span class=\"mtk1\"> = {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk12\">component:</span><span class=\"mtk1\"> </span><span class=\"mtk4\">null</span><span class=\"mtk1\">, </span><span class=\"mtk3\">//initializing state</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t};</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk3\">//loading the component and setting it to state</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk11\">componentDidMount</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk11\">importComp</span><span class=\"mtk1\">().</span><span class=\"mtk11\">then</span><span class=\"mtk1\">((</span><span class=\"mtk12\">comp</span><span class=\"mtk1\">) </span><span class=\"mtk4\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk11\">setState</span><span class=\"mtk1\">({ </span><span class=\"mtk12\">component:</span><span class=\"mtk1\"> </span><span class=\"mtk12\">comp</span><span class=\"mtk1\">.</span><span class=\"mtk12\">default</span><span class=\"mtk1\"> }));</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t}</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk3\">//rendering the component</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t</span><span class=\"mtk11\">render</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk4\">const</span><span class=\"mtk1\"> </span><span class=\"mtk12\">C</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">state</span><span class=\"mtk1\">.</span><span class=\"mtk12\">component</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk12\">C</span><span class=\"mtk1\"> ? (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t\t</span><span class=\"mtk17\">&lt;</span><span class=\"mtk10\">C</span><span class=\"mtk1\"> </span><span class=\"mtk4\">{</span><span class=\"mtk1\">...</span><span class=\"mtk4\">this</span><span class=\"mtk1\">.</span><span class=\"mtk12\">props</span><span class=\"mtk4\">}</span><span class=\"mtk1\"> </span><span class=\"mtk17\">/&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t) : </span><span class=\"mtk12\">fallback</span><span class=\"mtk1\"> ? (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t\t</span><span class=\"mtk12\">fallback</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t) : (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t\t</span><span class=\"mtk17\">&lt;</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span><span class=\"mtk1\">loading</span><span class=\"mtk17\">&lt;/</span><span class=\"mtk4\">div</span><span class=\"mtk17\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t\t</span><span class=\"mtk3\">// If component is not loaded then return fallback component, if fallback is not provided then use default loading</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t\t}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">\t};</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">export</span><span class=\"mtk1\"> </span><span class=\"mtk15\">default</span><span class=\"mtk1\"> </span><span class=\"mtk12\">lazyLoader</span><span class=\"mtk1\">;</span></span></code></pre>\n</li>\n</ul>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk17 { color: #808080; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n</style>","frontmatter":{"date":"October 05, 2020","updated_date":null,"description":"Learn about lazy loading in React and how/when to use it","title":"Lazy loading in React","tags":["React","Lazy loading","React Suspense"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/9413be85c5c5c59674b56bdb292753b4/58556/react.webp","srcSet":"/static/9413be85c5c5c59674b56bdb292753b4/61e93/react.webp 200w,\n/static/9413be85c5c5c59674b56bdb292753b4/1f5c5/react.webp 400w,\n/static/9413be85c5c5c59674b56bdb292753b4/58556/react.webp 800w,\n/static/9413be85c5c5c59674b56bdb292753b4/210c1/react.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Akshay Avinash","github":"akshay11298","avatar":null}}}},{"node":{"excerpt":"GraphQL's popularity has skyrocketed since its release in 2015. It is the modern way of developing and querying APIs. GraphQL is an…","fields":{"slug":"/engineering/what-is-graphql/"},"html":"<p>GraphQL's popularity has skyrocketed since its release in 2015. It is the modern way of developing and querying APIs. GraphQL is an application programming interface (API) query language and server-side runtime that prioritises giving customers precisely the data they request.</p>\n<p>GraphQL is designed to make fast, scalable, and <a href=\"/what-is-an-api/\">developer-friendly APIs</a>. GraphQL allows developers to build requests that pull data from multiple data sources in a single API call as an alternative to REST.</p>\n<h2 id=\"foundation-of-graphql\" style=\"position:relative;\"><a href=\"#foundation-of-graphql\" aria-label=\"foundation of graphql permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Foundation of GraphQL</h2>\n<p>It was developed internally by <a href=\"https://techcrunch.com/2018/11/06/facebooks-graphql-gets-its-own-open-source-foundation/\">Facebook in 2012</a> before being publicly released in 2015. \"On 7 November 2018, the GraphQL project was moved from Facebook to the newly-established GraphQL Foundation, hosted by the non-profit Linux Foundation.\"</p>\n<h2 id=\"what-is-graphql\" style=\"position:relative;\"><a href=\"#what-is-graphql\" aria-label=\"what is graphql permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is GraphQL?</h2>\n<p>GraphQL is an application-level query language that helps data fetching and serving between client and server runtime by providing a standard protocol for queries. Its strength lies in the fact that it offers a modern, simpler, and efficient way to query and develop APIs. The real deal is its <strong>flexible data fetching</strong> -- the application only loads relevant data from the server. Also, GraphQL is hierarchical in nature; it structures relationships in a simple hierarchical manner to avoid complex queries while fetching data.</p>\n<h2 id=\"why-to-use-graphql\" style=\"position:relative;\"><a href=\"#why-to-use-graphql\" aria-label=\"why to use graphql permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why to use GraphQL?</h2>\n<p>GraphQL <strong>offers much power and flexibility</strong> over Traditional APIs. One of the few things GraphQL was designed, was to solve Data Fetching/Loading problems.</p>\n<p>Data fetching is one of the most critical factors responsible for the performance of the application. Most of the time, the data provided by the API isn't required to run the application. This problem is termed as <strong>\"Over fetching\"</strong>, which can be a more significant issue in mobile devices. Since devices with slower network connection are bound to take more load time, it creates a <strong>negative impact on end-users.</strong></p>\n<p>In the current scenario, traditional <a href=\"/best-practice-guide-for-rest-api-security/\">REST APIs</a> offer no clean way to solve this problem; GraphQL comes to the rescue. It allows <strong>clients to define the structure of the data</strong> required, and the same structure of the data is returned from the server. Therefore preventing fetching loads and loads of data, ultimately increasing performance.</p>\n<p>API endpoints generally fetch specific data, hence to load a certain data-rich application, there have to be <strong>multiple requests to the server.</strong> But, applications should fetch relevant data in one round trip to avoid <strong>degrading performance.</strong> The flexibility and richness of the GraphQL, allows us to define all the data to fetch in a single request, avoiding multiple Round trips</p>\n<p><img src=\"/694f76479da4ca6d382a0378c1c401c9/wrapper.webp\" alt=\"Wrapping a REST API in GraphQL\">\n<em>Wrapping REST API in graphQL - Source - Joey Ng'ethe | TwigaTech</em></p>\n<h2 id=\"fundamentals-of-graphql\" style=\"position:relative;\"><a href=\"#fundamentals-of-graphql\" aria-label=\"fundamentals of graphql permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Fundamentals of GraphQL</h2>\n<table>\n<thead>\n<tr>\n<th>Server -></th>\n<th>GraphQL Server -></th>\n<th>Graphql Client -></th>\n<th>Client</th>\n</tr>\n</thead>\n<tbody>\n</tbody>\n</table>\n<hr>\n<p><strong>Schema</strong> - GraphQL follows a type system to define the schema of an API. The syntax for writing schemas is called Schema Definition Language (SDL).</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\"># </span><span class=\"mtk12\">A</span><span class=\"mtk1\"> </span><span class=\"mtk12\">simple</span><span class=\"mtk1\"> </span><span class=\"mtk12\">example</span><span class=\"mtk1\"> </span><span class=\"mtk12\">to</span><span class=\"mtk1\"> </span><span class=\"mtk12\">define</span><span class=\"mtk1\"> </span><span class=\"mtk12\">schema</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">type</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Person</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  name: String!</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  age: Int!</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p><strong>Query</strong> - The data or information that a client needs from a server can be fetched in a request using queries.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"json\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\"># This query fetches all specifically names of all users</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk14\">users</span><span class=\"mtk1\"> </span><span class=\"mtk14\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk14\">name</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\"># This query fetches all names of all friends of user </span><span class=\"mtk8\">&quot;Anup&quot;</span><span class=\"mtk1\">.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk14\">user(name</span><span class=\"mtk1\">: </span><span class=\"mtk8\">&quot;Anup&quot;</span><span class=\"mtk14\">)</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk14\">name</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk14\">friend</span><span class=\"mtk1\"> </span><span class=\"mtk14\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">      </span><span class=\"mtk14\">name</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p><strong>Mutation</strong> - Mutations are the way to modify data to the server; these include creating/updating/deleting data. They have similar syntax as queries, with special keywords ahead of them.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"json\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\"># This mutation adds a user with name </span><span class=\"mtk8\">&quot;Anup&quot;</span><span class=\"mtk1\"> and age </span><span class=\"mtk7\">20</span><span class=\"mtk1\">.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">mutation {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  </span><span class=\"mtk14\">addUser(</span><span class=\"mtk1\"> </span><span class=\"mtk14\">name</span><span class=\"mtk1\"> : </span><span class=\"mtk8\">&quot;Anup&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk14\">age</span><span class=\"mtk1\">: </span><span class=\"mtk7\">20</span><span class=\"mtk14\">)</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk14\">name</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk14\">age</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">  }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Despite its powers, you might not need graphQL in your applications -</p>\n<ul>\n<li>Since it adds unnecessary overhead and complex architecture for simple applications.</li>\n<li>It makes web caching challenging to implement.</li>\n</ul>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>GraphQL is a step forward in the world of applications by providing a significant boost in performance. Another plus point of GraphQL is that it is not meant to replace any existing solution but enhance and co-exist with REST APIs. Simply put, the future of GraphQL looks bright.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk14 { color: #F44747; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n</style>","frontmatter":{"date":"October 01, 2020","updated_date":null,"description":"GraphQL is a syntax that specifies how data can be requested and is usually used to load data to a client from a server. Find out why to use it and any other advantages.","title":"What is GraphQL? - A Basic Guide","tags":["Engineering","API","GraphQL","Performance"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4674ea0950b63a1ff2d08638af559bc0/58556/graph.webp","srcSet":"/static/4674ea0950b63a1ff2d08638af559bc0/61e93/graph.webp 200w,\n/static/4674ea0950b63a1ff2d08638af559bc0/1f5c5/graph.webp 400w,\n/static/4674ea0950b63a1ff2d08638af559bc0/58556/graph.webp 800w,\n/static/4674ea0950b63a1ff2d08638af559bc0/210c1/graph.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Anup Aglawe","github":"anup-a","avatar":null}}}},{"node":{"excerpt":"Determining how consumers are introduced to a brand is as important as managing their subsequent journey. With LoginRadius’ recently…","fields":{"slug":"/identity/loginradius-announces-user-management/"},"html":"<p>Determining how consumers are introduced to a brand is as important as managing their subsequent journey. With LoginRadius’ recently <a href=\"https://www.loginradius.com/user-management/\">launched User Management feature</a>, businesses can enjoy streamlined access control and adjustable privileges for their consumers. </p>\n<h2 id=\"intent-behind-the-launch\" style=\"position:relative;\"><a href=\"#intent-behind-the-launch\" aria-label=\"intent behind the launch permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Intent Behind the Launch</h2>\n<p>Simply put, the LoginRadius User Management feature solves the problem of managing the multiple operations that revolve around consumer data. </p>\n<p>It also has been designed to help your business in the following ways: </p>\n<ul>\n<li>It is an easy-to-use feature launched to handle your user management and support requirements.</li>\n<li>It allows you to control and restrict access for consumers from the LoginRadius Admin Console. You can also handle consumers from your application’s admin console.</li>\n<li>It allows you to block, or delete consumers based on your business policies. </li>\n<li>It allows you to feed consumers' data in real-time using Webhooks and APIs.</li>\n<li>It reduces your team effort to maintain and manage consumer data.</li>\n<li>It helps you to migrate the existing consumer data from multiple sources.</li>\n</ul>\n<p><a href=\"https://www.loginradius.com/resource/loginradius-ciam-user-management/\"><img src=\"/19a7a4a6794267ecd76445242f5a3f6e/DS-LoginRadius-User-Management.webp\" alt=\"loginradius user management datasheet\"></a></p>\n<h2 id=\"key-capabilities-of-loginradius-user-management\" style=\"position:relative;\"><a href=\"#key-capabilities-of-loginradius-user-management\" aria-label=\"key capabilities of loginradius user management permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Key Capabilities of LoginRadius User Management</h2>\n<p>1. <strong>User management process</strong>: LoginRadius offers complete consumer management features, including: </p>\n<ul>\n<li><strong>Provisioning</strong>: To create consumer accounts.</li>\n<li><strong>Authorization</strong>: To validate the access rights of consumers.</li>\n<li><strong>Account Management</strong>: To disable consumer accounts, and grant, or restrict access.</li>\n<li><strong>Password Management</strong>: To trigger the password reset option for consumer accounts.</li>\n<li><strong>Deprovisioning</strong>: To block, or delete consumer accounts.</li>\n</ul>\n<p>2. <strong>Multiple operations of user data</strong>: LoginRadius allows the following actions to be performed on consumers’ data:</p>\n<ul>\n<li><strong>Data filtration</strong>: To search consumers based on parameters like Name, Email, UID, ID, and Phone ID via the LoginRadius Admin Console.</li>\n<li><strong>API support for user management</strong>: To allow all user management features to be directly integrated into your application’s Admin Console.</li>\n<li><strong>Real-time user data feeds using webhooks</strong>: To obtain real-time feeds of consumer data using the LoginRadius webhooks.</li>\n<li><strong>Data migration services for user management</strong>: To offer self-serve and CSV-based data migration via the LoginRadius Admin Console.</li>\n</ul>\n<h3 id=\"a-final-word\" style=\"position:relative;\"><a href=\"#a-final-word\" aria-label=\"a final word permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A Final Word</h3>\n<p>The User Management feature by LoginRadius is unique in that it monitors and manages the entire consumer journey through automated access permissions, data migration, API support, and other consumer-centric solutions. Now, blend it with creating <a href=\"https://www.loginradius.com/customer-experience-solutions/\">meaningful relationships with your consumers</a>—that’s what we offer. </p>\n<p><a href=\"https://www.loginradius.com/contact-us?utm_source=blog&#x26;utm_medium=web&#x26;utm_campaign=loginradius-announces-user-management\"><img src=\"/8fce571f703a5970dbb1359a2fe0e51a/book-a-demo-loginradius.webp\" alt=\"Book-a-demo-loginradius\"></a></p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"September 30, 2020","updated_date":null,"description":"Businesses will enjoy simplified access control and flexible rights for their customers with the newly added User Management functionality of LoginRadius.","title":"Announcement – LoginRadius Announces the Availability of User Management","tags":["user management","identity management","password management"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/22595533068957863c04b02f3ec0541a/7f8e9/image1.webp","srcSet":"/static/22595533068957863c04b02f3ec0541a/61e93/image1.webp 200w,\n/static/22595533068957863c04b02f3ec0541a/1f5c5/image1.webp 400w,\n/static/22595533068957863c04b02f3ec0541a/7f8e9/image1.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"C# and the .NET CLR use exceptions to show that an error condition has arisen during program execution. C# programs are under constant…","fields":{"slug":"/engineering/exception-handling-in-csharp/"},"html":"<p>C# and the .NET CLR use exceptions to show that an error condition has arisen during program execution. C# programs are under constant threat of running into some sort of problem. As a program’s complexity grows, the probability that something odd would happen during its execution also gets higher.</p>\n<p>In this blog, we will go through the basics of Exception and Exception handling. We will also look at how we can achieve exception handling using try, catch, and finally blocks and how to create your own custom exceptions.</p>\n<h2 id=\"exception\" style=\"position:relative;\"><a href=\"#exception\" aria-label=\"exception permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Exception</h2>\n<p>The errors which we are getting at the run time of the application is called an exception. </p>\n<p>If any exception is coming into our application then the application is abnormally terminated. The Application is not considered as a good application if any exception is coming and it is not handled. </p>\n<p>Every time when we are developing an application and it got successfully build without any errors. Then this happens</p>\n<p><img src=\"/637891a6f138659d4c56102d6f9a93dc/image1.webp\" alt=\"Exception\"></p>\n<p>For that, it is good practice to use exception handling.</p>\n<h3 id=\"common-net-exceptions-\" style=\"position:relative;\"><a href=\"#common-net-exceptions-\" aria-label=\"common net exceptions  permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Common .NET Exceptions :</h3>\n<p>Below are the common .NET exceptions which we can see on a regular basis of coding.</p>\n<p><strong>System.NullReferenceException</strong> – Occurs when calling a method on a null object reference</p>\n<p><strong>System.IndexOutOfRangeException</strong> – Occurs attempting to access an array element that does not exist</p>\n<p><strong>System.IO.IOException</strong> – Used around many file I/O type operations</p>\n<p><strong>System.OutOfMemoryException</strong> – Occurs when the app runs out of memory</p>\n<p><strong>System.InvalidCastException</strong> – Occurs when you try to cast an object to a type that it can’t be cast to</p>\n<p><strong>System.InvalidOperationException</strong> - Occurs when a method call is invalid for the object's current state </p>\n<p><strong>System.ArgumentException</strong> - Occurs when one of the arguments provided to a method is not valid</p>\n<h2 id=\"exception-handling\" style=\"position:relative;\"><a href=\"#exception-handling\" aria-label=\"exception handling permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Exception Handling</h2>\n<p>The process of handling any run time error is called exception handling. The exception handling is performed to maintain the normal flow of the application. </p>\n<p>In C# we can achieve this using the below techniques:</p>\n<h3 id=\"trycatch--finally-blocks\" style=\"position:relative;\"><a href=\"#trycatch--finally-blocks\" aria-label=\"trycatch  finally blocks permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Try,Catch &#x26; Finally blocks</h3>\n<p>This is a very basic Exception handling technique in which try, catch, and finally, blocks are used.</p>\n<p><strong>try block:</strong> In this block the code is written which may cause the exception. If any exception is thrown then the corresponding catch block is executed.</p>\n<p><strong>catch block:</strong> In this block the exception is caught which means if an exception is thrown from the try block then we write the code to handle or log it.</p>\n<p><strong>finally block:</strong> In this block we write the certain code which we want to execute if an exception is thrown or not. For example: disposing of an object or closing the database connection.</p>\n<p>Exception Handling after using try, catch blocks</p>\n<p><img src=\"/a5332fea89acc7c29c7265f0773f15a6/ExceptionHandling.webp\" alt=\"Exception Handling\"></p>\n<p><strong>Note:</strong> Multiple finally blocks are not allowed. Also, the finally block cannot have the return, continue, or break keywords. It doesn't let control leave the finally block.</p>\n<p>In C#, both catch and finally blocks are optional. The try block can exist either with one or more catch blocks or a finally block or with both catch and finally blocks. The try block without a catch or finally block will give a compile-time error.</p>\n<p>If there is no exception occurred inside the try block, the control directly transfers to the finally block. We can say that the statements inside the finally block are executed always.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code which can cause an exception.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\">(</span><span class=\"mtk10\">Type</span><span class=\"mtk1\"> </span><span class=\"mtk12\">x</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code for handling the exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">finally</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">//Any cleanup code</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"multiple-catch-blocks\" style=\"position:relative;\"><a href=\"#multiple-catch-blocks\" aria-label=\"multiple catch blocks permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Multiple Catch blocks</h3>\n<p>We can use the multiple catch blocks when we are not sure which type of exception will be thrown by the code. So that will help to catch the multiple types of exceptions.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">try</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code which can cause an exception.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\">(</span><span class=\"mtk10\">ArithmeticException</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code for handling the exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\">(</span><span class=\"mtk10\">IndexOutOfRangeException</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code for handling the exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">finally</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">//Any cleanup code</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"catch-multiple-exceptions-in-the-single-catch-block\" style=\"position:relative;\"><a href=\"#catch-multiple-exceptions-in-the-single-catch-block\" aria-label=\"catch multiple exceptions in the single catch block permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Catch multiple exceptions in the single catch block</h3>\n<p>We can use the generic exception class as well to catch all types of exception in that case we have to write the catch block as below:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">try</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code which can cause an exception.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\">(</span><span class=\"mtk10\">Exception</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code for handling the exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">finally</span><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">//Any cleanup code</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p><strong>Note:</strong> Multiple catch blocks with the same exception type are not allowed. A catch block with the base Exception type must be the last block.</p>\n<h3 id=\"exception-filters\" style=\"position:relative;\"><a href=\"#exception-filters\" aria-label=\"exception filters permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Exception Filters</h3>\n<p>In C# 6.0 a new feature is introduced to handle the exception which is called the Exception Filters. This feature will allow you to handle more specific exceptions in catch blocks so that you can write the code specific to the exception condition.</p>\n<p>Like before C# 6.0 We had to catch any exception and handle it. Now in C# 6.0, we can handle the exception specific to the condition.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code which can cause an exception.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\">(</span><span class=\"mtk10\">Type</span><span class=\"mtk1\"> </span><span class=\"mtk12\">x</span><span class=\"mtk1\">) </span><span class=\"mtk15\">when</span><span class=\"mtk1\">(</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">//some condition</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Code for handling the exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\">(</span><span class=\"mtk10\">Type</span><span class=\"mtk1\"> </span><span class=\"mtk12\">x</span><span class=\"mtk1\">) </span><span class=\"mtk15\">when</span><span class=\"mtk1\"> (</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">//some condition</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\"> </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">finally</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">//Any cleanup code</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\"> </span></span></code></pre>\n<h3 id=\"nested-try-catch\" style=\"position:relative;\"><a href=\"#nested-try-catch\" aria-label=\"nested try catch permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Nested try-catch</h3>\n<p>C# allows nested try-catch blocks. When using nested try-catch blocks, an exception will be caught in the first matching catch block that follows the try block where an exception occurred.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk4\">void</span><span class=\"mtk1\"> </span><span class=\"mtk11\">Main</span><span class=\"mtk1\">(</span><span class=\"mtk4\">string</span><span class=\"mtk1\">[] </span><span class=\"mtk12\">args</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">int</span><span class=\"mtk1\"> </span><span class=\"mtk12\">divider</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">0</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\"> </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">result</span><span class=\"mtk1\"> = </span><span class=\"mtk7\">1</span><span class=\"mtk1\">/</span><span class=\"mtk12\">divider</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk15\">catch</span><span class=\"mtk1\">(</span><span class=\"mtk10\">Exception</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk12\">Console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">WriteLine</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;Inner catch block&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">catch</span><span class=\"mtk1\">(</span><span class=\"mtk10\">Exception</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">Console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">WriteLine</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;Outer catch block&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>An inner catch block will be executed in the above example because it is the first catch block that handles all exception types.</p>\n<p>If there is not an inner catch block that matches with raised exception type, then the control will flow to the outer catch block until it finds an appropriate exception filter.</p>\n<h3 id=\"throw-an-exception\" style=\"position:relative;\"><a href=\"#throw-an-exception\" aria-label=\"throw an exception permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Throw an Exception</h3>\n<p>C# allows throwing an exception. The <code>throw</code> keyword is used for that purpose. One of the benefits of throwing an exception can be when a problem occurs in the middle of the complicated method execution because handling that situation in that complicated method would make that method even more complex. Then we should throw an exception and let the catch block to handle it.</p>\n<p>The throw keyword can only be used with the Exception object except for the catch block. It will be discussed in the next section.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">//throw exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">throw</span><span class=\"mtk1\"> </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Exception</span><span class=\"mtk1\">();</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\"> (</span><span class=\"mtk10\">Exception</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">//some code to hadle the exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p><strong>Note</strong>: The throw keyword is used to throw or create the new exception. If the throw keyword is used and if there is any catch block then the catch block will be executed next.</p>\n<h3 id=\"rethrow-an-exception\" style=\"position:relative;\"><a href=\"#rethrow-an-exception\" aria-label=\"rethrow an exception permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Rethrow an Exception</h3>\n<p>When an exception is caught in the catch block, we can do some operations and then re-throw the exception. Rethrow an exception means calling the <code>throw</code> keyword without an exception object inside a catch block.</p>\n<p>Here is the point to note that if we follow the below approach to rethrow the exception then the proper stack trace will not be maintained means it will not point out that actually where the exception occurred it will show in the stack trace the line number from which the exception is rethrown.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"6\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// Code which can cause an exception.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\"> (</span><span class=\"mtk10\">Exception</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">throw</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">;</span><span class=\"mtk3\">//Exception is rethrown with the exception object</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>Now if we follow the below approach then the proper stack trace will be maintained with maintaining the exact line number where the exception actually occurred.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"7\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// Code which can cause an exception.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\"> (</span><span class=\"mtk10\">Exception</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">throw</span><span class=\"mtk1\">;</span><span class=\"mtk3\">//Exception is rethrown with the exception object</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"user-defined-exceptions\" style=\"position:relative;\"><a href=\"#user-defined-exceptions\" aria-label=\"user defined exceptions permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>User-defined Exceptions</h3>\n<p>User-defined exceptions are those exceptions that are not defined by the programming language. In C# we can create our own custom exceptions(User-defined exceptions)</p>\n<p>C# exceptions are defined as classes, just like any other C# object. All exceptions are inherited from a base System.Exception class. There are many common exceptions that you can use within your own code.</p>\n<p>Creating your own C# custom exceptions is helpful only when you are going to catch that specific type of exception and handle it differently.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"8\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">Program</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk4\">static</span><span class=\"mtk1\"> </span><span class=\"mtk4\">void</span><span class=\"mtk1\"> </span><span class=\"mtk11\">Main</span><span class=\"mtk1\">(</span><span class=\"mtk4\">string</span><span class=\"mtk1\">[] </span><span class=\"mtk12\">args</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                </span><span class=\"mtk3\">//throw user defined exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                </span><span class=\"mtk15\">throw</span><span class=\"mtk1\"> </span><span class=\"mtk4\">new</span><span class=\"mtk1\"> </span><span class=\"mtk10\">CustomException</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;Custom exception thrown&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk15\">catch</span><span class=\"mtk1\"> (</span><span class=\"mtk10\">Exception</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">                </span><span class=\"mtk12\">Console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">WriteLine</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;Exception caught here&quot;</span><span class=\"mtk1\"> + </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">.</span><span class=\"mtk11\">ToString</span><span class=\"mtk1\">());</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">class</span><span class=\"mtk1\"> </span><span class=\"mtk10\">CustomException</span><span class=\"mtk1\"> : </span><span class=\"mtk10\">Exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk3\">//User-defined exception which inherits base class Exception</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk4\">public</span><span class=\"mtk1\"> </span><span class=\"mtk11\">CustomException</span><span class=\"mtk1\">(</span><span class=\"mtk4\">string</span><span class=\"mtk1\"> </span><span class=\"mtk12\">message</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk12\">Console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">WriteLine</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;User defined exception&quot;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span></code></pre>\n<h2 id=\"exception-handling-best-practices\" style=\"position:relative;\"><a href=\"#exception-handling-best-practices\" aria-label=\"exception handling best practices permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Exception Handling Best Practices</h2>\n<h3 id=\"log-exception\" style=\"position:relative;\"><a href=\"#log-exception\" aria-label=\"log exception permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Log Exception</h3>\n<p>It is considered a good practice to log all the exception which are coming into our application. The main benefit of logging exceptions that we can know exactly what are the conditions on which the code is failing instead of asking from the user that what inputs he has provided we can log all the required information and use that data to solve the error.</p>\n<p>In many cases, we just ignore the catch block by writing nothing in it. There are some .NET libraries available for logging purposes like NLog, Serilog, etc.</p>\n<p>We can log exception into the catch block. Every exception is coming into our application is crucial as they are critical to finding the problems in the code.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"c#\" data-index=\"9\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk15\">try</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">   </span><span class=\"mtk3\">//Some code</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">catch</span><span class=\"mtk1\"> (</span><span class=\"mtk10\">Exception</span><span class=\"mtk1\"> </span><span class=\"mtk12\">ex</span><span class=\"mtk1\">)</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">{</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">   </span><span class=\"mtk3\">//Log Exception here!!!</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">   </span><span class=\"mtk12\">Log</span><span class=\"mtk1\">.</span><span class=\"mtk11\">Error</span><span class=\"mtk1\">(</span><span class=\"mtk12\">ex</span><span class=\"mtk1\">); </span><span class=\"mtk3\">// log the inputs provided by the user or any specific condition</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<h3 id=\"first-chance--second-chance-exception\" style=\"position:relative;\"><a href=\"#first-chance--second-chance-exception\" aria-label=\"first chance  second chance exception permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>First Chance &#x26; Second Chance Exception</h3>\n<p>The first chance exception is mainly designed for debugging purposes. Like whenever an exception occurs it first goes to the debugger giving the first chance to you and then to the program/application. If that exception is unhandled in the program/application then it gets back to the debugger giving a second chance to you to do something with your code before and after the application itself decides to do.</p>\n<p>It gives you visibility into every .NET exception being thrown.</p>\n<p>We can enable the first chance exception in the Visual Studio by going into the\nDebug > Windows > Exception Settings > check next to \"Common Language Runtime Exceptions\"</p>\n<p>You can also select the exceptions you want the debugger to break automatically in the above setting.</p>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>In this blog, we learned about the basics of Exception, Exception Handling, and some best practices of exception handling. Use of the exception handling with its best practices in the application will help the application to run smoother and without any bad user experience.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n</style>","frontmatter":{"date":"September 29, 2020","updated_date":null,"description":null,"title":"Exceptions and Exception Handling in C#","tags":["C#","Exception","Exception Handling",".NET","Exception Handling Best Practices"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5748031496062993,"src":"/static/08a77b05a9e3c87430c53bdc17497fe6/58556/csharplogo.webp","srcSet":"/static/08a77b05a9e3c87430c53bdc17497fe6/61e93/csharplogo.webp 200w,\n/static/08a77b05a9e3c87430c53bdc17497fe6/1f5c5/csharplogo.webp 400w,\n/static/08a77b05a9e3c87430c53bdc17497fe6/58556/csharplogo.webp 800w,\n/static/08a77b05a9e3c87430c53bdc17497fe6/99238/csharplogo.webp 1200w,\n/static/08a77b05a9e3c87430c53bdc17497fe6/7c22d/csharplogo.webp 1600w,\n/static/08a77b05a9e3c87430c53bdc17497fe6/36d36/csharplogo.webp 1650w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","avatar":null}}}},{"node":{"excerpt":"A lot has been written and talked about Unit Testing in the IT industry for the last couple of years. I have heard and discussed the same…","fields":{"slug":"/engineering/unit-testing/"},"html":"<p>A lot has been written and talked about Unit Testing in the IT industry for the last couple of years. I have heard and discussed the same over the previous 2.5 decades of my IT career.</p>\n<p>Even though a lot is talked about and is done in this field but still today, every company is struggling with this. But before we proceed with the above situation, let us first understand its importance.</p>\n<p>A strong foundation is the basis of a strong building in the same way a proper unit testing is the foundation of high-quality software.</p>\n<p>Unit Testing, if done correctly, ensures that each of the building blocks of the software product is robust and will make high-quality software when put together.</p>\n<p>Unit testing is an essential tool in any serious software developer's toolbox. However, writing a good unit test for a specific piece of code can often be very hard.</p>\n<p><a href=\"https://www.loginradius.com/blog/engineering/agile-development-team/\">Developers frequently believe</a> that their struggles are triggered by a lack of essential testing expertise or hidden unit testing techniques after experiencing trouble testing their own or someone else's code.</p>\n<h2 id=\"what-is-unit-testing\" style=\"position:relative;\"><a href=\"#what-is-unit-testing\" aria-label=\"what is unit testing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What is Unit Testing?</h2>\n<p>Testing of the unit requires testing individual components of the programme or application software. The <a href=\"https://en.wikipedia.org/wiki/Unit_testing\">primary objective</a> behind this is to verify that all the individual components function as expected. </p>\n<p>As the smallest possible part of the software that can be evaluated, a unit is known. It usually has a couple of inputs and a single output.</p>\n<p>Both testers and developers can isolate each module, detect and repair device defects at a very early stage of the life cycle of software development with this testing method (SDLC).</p>\n<h2 id=\"why-unit-testing-is-essential\" style=\"position:relative;\"><a href=\"#why-unit-testing-is-essential\" aria-label=\"why unit testing is essential permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why Unit Testing is essential?</h2>\n<p>By considering stubs, mock artifacts, drivers, and unit testing frameworks, this methodology effectively helps validate the consistency of a section of code. </p>\n<p>Because it is practiced at the initial testing level, this testing methodology ensures that the vulnerabilities are detected and corrected at the early stage of SDLC, even before they become costly for businesses to repair when they are later identified.</p>\n<p>The developers and testers can help save time with a suitable unit testing practice as bugs can be found early in the process as it is the initial testing step. Skipping or restricting the unit testing practice will adversely increase the defects, and repairing them later becomes difficult.</p>\n<p>Therefore before preparing for the integration testing, it is essential to practice unit testing at the initial stage of the software testing process.</p>\n<h2 id=\"why-is-it-difficult-to-run-a-smooth-unit-testing-procedure\" style=\"position:relative;\"><a href=\"#why-is-it-difficult-to-run-a-smooth-unit-testing-procedure\" aria-label=\"why is it difficult to run a smooth unit testing procedure permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why is it difficult to run a smooth unit testing procedure?</h2>\n<p>Well, it is not that a developer loves to find bugs in his/her coded code. Still, when it comes to unit testing, they at times(most of the time) see it has an additional overhead on them, especially when one has to follow and stick to a lot of protocols, frameworks, and documentation, etc. </p>\n<p>Also, it is commonly misunderstood that finding issues is the QC team's problem. We have to code. In my view, it is incorrect thinking as Quality Software is standard or combines commitment from a company and it's the team.</p>\n<h2 id=\"what-are-the-benefits-of-unit-testing\" style=\"position:relative;\"><a href=\"#what-are-the-benefits-of-unit-testing\" aria-label=\"what are the benefits of unit testing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What are the benefits of Unit Testing?</h2>\n<p>Here are a few benefits of unit testing:</p>\n<h3 id=\"1-agile-process\" style=\"position:relative;\"><a href=\"#1-agile-process\" aria-label=\"1 agile process permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>1. Agile process</h3>\n<p>The most significant advantage of unit testing is this. You would need to make improvements to the old design and code when you add more functionality to any programme, which can be costly and risky. If you use the technique of unit testing, this will save a lot of time and can make the whole process much quicker and simpler.</p>\n<h3 id=\"2-enhance-the-code-quality\" style=\"position:relative;\"><a href=\"#2-enhance-the-code-quality\" aria-label=\"2 enhance the code quality permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2. Enhance the Code Quality</h3>\n<p>Unit testing increases code consistency dramatically. It allows designers to recognize the smallest faults present in the units before they go for integration testing.</p>\n<h3 id=\"3-fix-software-bugs\" style=\"position:relative;\"><a href=\"#3-fix-software-bugs\" aria-label=\"3 fix software bugs permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3. Fix Software Bugs</h3>\n<p>At a very early point, unit testing helps detect all sorts of problems with the programme. Until going any further, software developers should then focus on those problems first. </p>\n<p>This is the primary benefit of this because no other program component is compromised as the issues are fixed at an early stage. This results in improved performance, decreased downtime, and lower costs that would otherwise occur due to the entire design process's stalling.</p>\n<h3 id=\"4-facilitates-change\" style=\"position:relative;\"><a href=\"#4-facilitates-change\" aria-label=\"4 facilitates change permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>4. Facilitates Change</h3>\n<p>When you test each part of the program individually, refactoring the code or upgrading the device library becomes much simpler. If there are any issues, they are found early on, and it thus becomes much easier to make improvements to the system.</p>\n<p>Before it goes on to the next level, the accuracy of each unit is checked. This implies that until it's incorporated with other companies, the device is proven to be in good working order.</p>\n<h3 id=\"5-provides-documentation\" style=\"position:relative;\"><a href=\"#5-provides-documentation\" aria-label=\"5 provides documentation permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>5. Provides Documentation</h3>\n<p>Unit verification considers the whole system's documentation. By reading each module's documentation, developers who want to learn about the features of a specific programme or framework will quickly learn about the device.</p>\n<p>It makes it possible for them to have a detailed understanding of the system and what each part does.</p>\n<h3 id=\"6-seamless-debugging\" style=\"position:relative;\"><a href=\"#6-seamless-debugging\" aria-label=\"6 seamless debugging permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>6. Seamless Debugging</h3>\n<p>To a great degree, unit testing will simplify the debugging process. If a particular test fails, it is essential to debug only the most recent improvements made to the code.</p>\n<h3 id=\"7-reduce-costs\" style=\"position:relative;\"><a href=\"#7-reduce-costs\" aria-label=\"7 reduce costs permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>7. Reduce Costs</h3>\n<p>In the early stages, any problems or glitches in the system are detected by unit testing, and the cost of bug fixes is significantly reduced because of this. If these vulnerabilities are found later, so repairing them would be even more costly.</p>\n<h2 id=\"how-to-do-unit-testing\" style=\"position:relative;\"><a href=\"#how-to-do-unit-testing\" aria-label=\"how to do unit testing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>How to do Unit Testing?</h2>\n<p>It is important for the unit testers to get a step-by-step instructional document in order to practice unit testing with the manual testing process. </p>\n<p>However, automated unit testing is often chosen by most companies, taking into account the efforts necessary for manual testing. </p>\n<ol>\n<li>Is my written code fulfilling the business requirement for which I have written the code?</li>\n<li>How many other application areas is my code impacting? Are the values passed from the new block causing an impact on existing areas? Here I would like to state that one has to focus more on the behavior of the existing code with new values. The earlier we do it in the coding cycle the better it is in terms of rework at the developer's end.</li>\n<li>If you can follow a specific framework like Junit or Nunit etc, for conducting the unit testing is fine, but if not, you are not able to do that it does not matter as I can always pass a set of values(both positive or negative) to my written code.</li>\n<li>If there is no Test case management tool for trapping the unit test values, do not worry; just make a .txt file, put the values, and outcomes in that and you can see the same on a shared drive.</li>\n<li>Can I write a few automated scripts to execute the repetitive code to save time?</li>\n<li>Can I show my code to my next neighboring coder to have a quick look into the same?</li>\n<li>If my code involves a UI can I have a quick run-through by a BA or PM or Tester from a usability point of view?</li>\n</ol>\n<p>In the end,  remember that I am the first and the most basic foundation in a big building of Quality and have to always keep the same in mind whenever I code since no one is interested in buying a well-packaged product if its ingredients are not of high quality.</p>\n<p>By doing the above I am not only contributing to high-quality software but I can devote later high bug-fixing time to things like <a href=\"https://www.loginradius.com/blog/engineering/16-javascript-hacks-for-optimization/\">improving the performance/security of my code</a> and avoiding going back to the drawing board for issues related to performance or security etc.</p>\n<p>Always remember in the software development unit testing serves as \"A stitch in time saves nine\".</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"September 29, 2020","updated_date":null,"description":"Unit testing is one of the types of software testing that requires an initial phase of testing. Find out the benefits and why its important for developers.","title":"Unit Testing: What is it and why do you need it?","tags":["Unit Testing","QA","Testing"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/6327467722c4e2f8951e626f58fbf29f/58556/unit-testing.webp","srcSet":"/static/6327467722c4e2f8951e626f58fbf29f/61e93/unit-testing.webp 200w,\n/static/6327467722c4e2f8951e626f58fbf29f/1f5c5/unit-testing.webp 400w,\n/static/6327467722c4e2f8951e626f58fbf29f/58556/unit-testing.webp 800w,\n/static/6327467722c4e2f8951e626f58fbf29f/99238/unit-testing.webp 1200w,\n/static/6327467722c4e2f8951e626f58fbf29f/7c22d/unit-testing.webp 1600w,\n/static/6327467722c4e2f8951e626f58fbf29f/f8fd9/unit-testing.webp 5472w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudhanshu Pandey","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"<p>Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.</p>\n<p>We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the <a href=\"https://www.loginradius.com/\">LoginRadius website</a>—to be faster, more intuitive, and developer-first in every way.</p>\n<p>The goal? Having them spend less time searching and more time building.</p>\n<h2 id=\"whats-new-and-improved-on-the-loginradius-website\" style=\"position:relative;\"><a href=\"#whats-new-and-improved-on-the-loginradius-website\" aria-label=\"whats new and improved on the loginradius website permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>What’s New and Improved on the LoginRadius Website?</h2>\n<p>LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.</p>\n<p>Here’s a closer look at what’s new and why it’s important:</p>\n<h3 id=\"a-developer-friendly-dark-theme\" style=\"position:relative;\"><a href=\"#a-developer-friendly-dark-theme\" aria-label=\"a developer friendly dark theme permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>A Developer-Friendly Dark Theme</h3>\n<p><img src=\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\" alt=\"This image shows how LoginRadius offers several authentication methods like traditional login, social login, passwordless login, passkeys and more in a dark mode.\">    </p>\n<p>Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.</p>\n<p>The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.</p>\n<p>So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.</p>\n<h3 id=\"clear-categorization-for-loginradius-capabilities\" style=\"position:relative;\"><a href=\"#clear-categorization-for-loginradius-capabilities\" aria-label=\"clear categorization for loginradius capabilities permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Clear Categorization for LoginRadius Capabilities</h3>\n<p><img src=\"/e5358b82be414940f3fb146013845933/capabilities.webp\" alt=\"This image shows a breakdown of all the LoginRadius CIAM capabilities, including authentication, security, UX, scalability and multi-brand management.\"></p>\n<p>We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:</p>\n<ul>\n<li>Authentication: Easily understand <a href=\"https://www.loginradius.com/blog/identity/authentication-option-for-your-product/\">how to choose the right login method</a>, from traditional passwords and OTPs to social login, federated SSO, and passkeys with few lines of code.</li>\n<li>Security: Implement no-code security features like bot detection, IP throttling, breached password alerts, DDoS protection, and adaptive MFA to safeguard user accounts.</li>\n<li>User Experience: Leverage AI builder, hosted pages, and drag-and-drop workflows to create smooth, branded sign-up and login experiences.</li>\n<li>High Performance &#x26; Scalability: Confidently scale with sub-100ms API response times, 100% uptime, 240K+ RPS, and 28+ global data center regions.</li>\n<li>Multi-Brand Management: Efficiently manage multiple identity apps, choosing isolated or shared data stores based on your brand’s unique needs.</li>\n</ul>\n<p>This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.</p>\n<h3 id=\"developer-first-navigation\" style=\"position:relative;\"><a href=\"#developer-first-navigation\" aria-label=\"developer first navigation permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Developer-First Navigation</h3>\n<p><img src=\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\" alt=\"This image shows the LoginRadius menu bar, highlighting the developer dropdown.\">   </p>\n<p>We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.</p>\n<p>The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.</p>\n<h3 id=\"quick-understanding-of-integration-benefits\" style=\"position:relative;\"><a href=\"#quick-understanding-of-integration-benefits\" aria-label=\"quick understanding of integration benefits permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Quick Understanding of Integration Benefits</h3>\n<p><img src=\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\" alt=\"This image shows a list of popular programming languages and frameworks offered by LoginRadius.\"></p>\n<p>Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.</p>\n<p>Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.</p>\n<h2 id=\"over-to-you-now\" style=\"position:relative;\"><a href=\"#over-to-you-now\" aria-label=\"over to you now permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Over to You Now!</h2>\n<p>Check out our <a href=\"https://www.loginradius.com/\">revamped LoginRadius website</a> and see how the improved experience makes it easier to build, scale, and secure your applications.</p>\n<p>Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n</style>","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},"pageContext":{"limit":6,"skip":720,"currentPage":121,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}