
Whenever creating any kind of application, you must think about its performance. Nowadays, performance is the biggest factor in applications. Consider if you have a competitive application, then if you lose the performance the users will go for the alternative application which leads you to the biggest loss.

When you start to create an application at the time you have to start to think about the performance as well. If you think later, then it will be a mess for you, because the performance factor will come to place when you are adding more facility to the application. When we add the features to the application gradually, the bundle size will also increase, and the browser needs to download the whole required files from the bundles.

We know the deployment bundle has all the files, so if you try to download all the files, that might face performance problems. So, here we can have one concept, that's called <span class="highlight-small">Lazy loader</span> or <span class="highlight-small">Code-splitting</span>.

<div class="highlight">

## What is ReactJS Lazy loading?

A lazy function lets you defer the loading of a component's code until it is rendered for the first time. Before, it will remain in the bundle. So that we can reduce the load of the application.

</div>

What is the syntax for lazy loading?

```javascript
import { lazy } from "react";

const componentName = lazy(load);
```

The function `lazy` is derived from react package and the lazy function has the only parameter that is our component. Once passed as a parameter to the function, then it will return as a new component that will be stored in the variable and we can use it accordingly.

E.g:-

```javascript
import { lazy } from "react";

const About = lazy(() => import("./Aboutus"));
```

The above example is doing the <span class="highlight-small">dynamic import()</span> of a component using lazy function.

Along with the lazy function we can use another component, i.e.; <span class="highlight-small">`React Suspense`</span>. This function will specify while the component is loading, look at the below picture to clear the confusion.

![How to do lazy loading in ReactJS](/assets/blog/helpers/lazyloading-gif.gif)

The above picture shows loading text while moving to the next item, but it is shown only once, because the component is downloaded from the bundle and does not require further loading of the same component. The loading text is coming from `Suspense` component.

```javascript
import React, { Suspense, lazy } from "react";

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

const About = lazy(() => import("./Aboutus"));

const HomeComp = lazy(() => import("./Home"));

const Contact = lazy(() => import("./contactus"));

function App() {
  return (
    <>
      <Router>
        <Suspense fallback={<div className="loading">Loading...</div>}>
          <Routes>
            <Route path="/" element={<Layout />}>
              <Route path="/" element={<HomeComp />} />

              <Route path="/about" element={<About />} />

              <Route path="/Contact" element={<Contact />} />
            </Route>
          </Routes>
        </Suspense>
      </Router>
    </>
  );
}
```

The above code is the abstract of the react lazy loader, please find the GitHub link for your references.

<a rel="nofollow" href="https://github.com/ullas1000/react-lazy-loader">React Lazy loader</a>

Thank you. <span>&#128526; <span>


A lazy function lets you defer the loading of a components code until it is rendered for the first time. Before, it will remain in the bundle. So that we can reduce the load of the application. 

How to do lazy loading in ReactJS

- ## **Writing test cases for modal popup in Jest**
Writing the test cases and asserting are very easy right after mounting the component. But some cases we will not recieve any result after mounting the component. that means mounted component will return null.

this only the reason I thought to share some steps to resolve the problem if anybody facing this already.

E.g.:- Modal popups, bootstrap modal and modal window

The modal winow or modal popup will rendered the top layer of the entire view or out of the body. So the Modal popup won't be captured at the time of mount operation. To capture the Modal popup we required additional settings before mounting the Modal component.

settings are nothing but mock function we have to write it.

I have demostrated the below jest mock function for the modal popup

```javascript
import React from 'react'
import { mount } from 'enzymme'
import { MemoryRouter } from 'react-router'
import SampleComponent from 'samplecomponent' // contains Modal component

describe('Test SampleComponent', () => {
    it('should load the Component', () => {
        const elemment = mount(<SampleComponent />)
        expect(element.html()).not.toBeNull()
    })
})
```

in the above code the variable *element* will not recieve the *Modal* component, eventually the test case will fail.

**How to fix the error then ?**

To fix the test case we have to add the mock function for Modal to the component. Given example in the below code snippet.

```javascript
import React from 'react'
import { mount } from 'enzymme'
import { MemoryRouter } from 'react-router'
import SampleComponent from 'samplecomponent' // contains Modal component

jest.mock('component library were the Modal is imported', ()=>{
    function Modal({children}) {
       return <div>{children}</div>
    }
    Modal.Header = 'Modal.Header'
    Modal.Body = 'Modal.Body'
    Modal.Footer = 'Modal.Footer'

    return Modal
})

describe('Test SampleComponent', () => {
    it('should load the Component', () => {
        const elemment = mount(<SampleComponent />)
        expect(element.html()).not.toBeNull()
    })
})
```

Hope this solution helped for your test case of bootstrap modal or other modal window pluggins


Writing test cases for modal popup in jest

Writing test cases for modal popup in Jest

- ## **Uncaught TypeError: Cannot read property 'location' of undefined**
It is a common error when you executing the test cases for useLocation in Jest. It is not like any other hooks since it is working with the router.(```'react-router-dom'```) it requres some extra input before running the test cases.

# **what is useLocation ?**

This isbone react hook, this hook will returns the current location object. This can be useful if you'd like to perform some side effect whenever the current location changes.

```javascript
import { useLocation } from 'react-router-dom'
```
Look at to the below sample test case snippet.

let consider `useLocation` has been used in the component `SampleComponent` and the below test case is for testing the component using mount function of enzyme

```javascript
import React from 'react'
import { mount } from 'enzymme'
import SampleComponent from 'samplecomponent'

describe('Test SampleComponent', () => {
    it('should load the Component', () => {
        const elemment = mount(<SampleComponent />)
        expect(element.html()).not.toBeNull()
    })
})
```
the result of the above code will be failed and says **Uncaught TypeError: Cannot read property 'location' of undefined**

because the program have used useLocation and when writing test case for that component also need to provide the initial value

lets solve the issue by a simple step, that nothing but wrap the compoent with `MemoryRouter`.
```javascript
import { MemoryRouter } from 'react-router'
```

then the program would be like this.

```javascript
import React from 'react'
import { mount } from 'enzymme'
import { MemoryRouter } from 'react-router'
import SampleComponent from 'samplecomponent' // the component contains useLocation hook

describe('Test SampleComponent', () => {
    it('should load the Component', () => {
        const elemment = mount(
            <MemoryRouter initialEntries={['/']}>
                <SampleComponent />
            </MemoryRouter>
        )
        expect(element.html()).not.toBeNull()
    })
})
```
MemoryRouter is a wrapper function which will help us to provide the correct input to the useLocation hook of the component.





Cannot read property location of undefined, this is an common test cases error in react jest while using useLocation hook in your react component

[Solved] Uncaught TypeError: Cannot read property 'location' of undefined


## **What is Markdown?**

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages. ".MD" is the file extension.

**What are the advantages of Markdown file.**

- **1.** Markdown is easy to read and write.</br>
- **2.** Writers and publishers love writing with Markdown as it reduces distractions.</br>
- **3.** It's intentionally simple.</br>
- **4.** Lets you focus on important things and increases productivity.</br>
- **5.** Converts plain text into HTML.</br>
- **6.** Multi-platform.</br>
- **7.** It doesn't break.
- **8.** Online markdown editors also available so easy to create it.

There are lot of markdown editors are available, if you are an expert then notepad is enough to write the contents on markdown file.

## **How to read/load the markdown aka .md files in ReactJS**

We going to use the NPM package to read the markdown or .md file. Currently many NPM pacakges are available to read the .md file, among that "marked" package we imported.

**Step 1.**

Initialize the project

```javascript
npx create-react-app markdownsample
```

**Step 2.**

Add the package

```javascript
npm i marked
```

**Step 3.**

create a .md file and name it readme.md or anything as your wish under the src folder.

**Step 4.**

Edit the App.js, were we added the logics

```javascript
import React, { useEffect, useState } from "react";
import readmePath from "./README.md";
import { marked } from "marked";
function App() {
  const [data, setData] = useState("");
  useEffect(() => {
    fetch(readmePath)
      .then((response) => {
        return response.text();
      })
      .then((text) => {
        setData(marked(text));
      });
  }, []);
  return (
    <React.Fragment>
      <article dangerouslySetInnerHTML={{ __html: data }} />
    </React.Fragment>
  );
}

export default App;
```

Here we imported the readme.md file and read using fetch function.
fetch function read the file into text. Once it is responded as text, it is passed as an argument to the "marked" function and directly set the result to state variable.

Finally state variable rendered to the article html element.

then the result would be like this in the below screenshot

![markdown file result](/assets/blog/helpers/markdown-result.JPG)

**Conclusion**

The above program snippet is helping to read and render the markdown or .md file.
Also you can fork the project from the given [Github link](https://github.com/ullas1000/markdownsample).


 Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. 

More Stories related to 'react'

Also read the similar topics