DEV Community: abhmohan

Props drilling and context api

abhmohan — Mon, 03 Apr 2023 08:37:28 +0000

Hello Guys,

In this article we will see what is props drilling and how we can use context api to avoid it.

Props drilling happens when we pass props to the destination components through the intermediate components. These intermediate components just forward the props deep down the component tree without actually using them.

Let's understand with the help of an example.

function App() {
  const [searchText, setSearchText] = useState('');

  const handleChange = (e) => {
    setSearchText(e.target.value);
  }

  return (
    <div className="App">
      <input onChange={handleChange} value={searchText}/>
      <List searchText={searchText} />
    </div>
  )
}

const List = ({searchText }) => {
// This component just forwards the searchText to the ListItems component
  return <ListItems searchText={searchText} />
}

const ListItems = ({ searchText }) => {
  const filteredName = names.filter(name => name.includes(searchText));

  return (
    <ul>
      {filteredName.map(name => <li>{name}</li>)}
    </ul>
  )
}

Here we have searchText which is passed to the List component and the List component forwards the searchText to the ListItems component. This is what we call props drilling.

Even though the List component doesnot use the searchText and just forwards it to the ListItems component, it still rerenders and that is unnecessary.

With context api, we donot have to pass the props to the intermediate components and the components that are wrapped inside the context provider can use the props directly inside them. Let's see how we can achieve this.

export const AppContext = createContext({})

function App() {
  const [searchText, setSearchText] = useState('');

  const handleChange = (e) => {
    setSearchText(e.target.value);
  }

  return (
    <AppContext.Provider value={{ searchText }}>
      <div className="App">
        <input onChange={handleChange} value={searchText}/>
        <List /> // we didn't pass the search text
      </div>
    </AppContext.Provider>
  )
}

const List = () => {
  return <ListItems /> // we didn't pass the searchText
}

const ListItems = () => {
  const { searchText } = useContext(AppContext);
  const filteredName = names.filter(name => name.includes(searchText));

  return (
    <ul>
      {filteredName.map(name => <li>{name}</li>)}
    </ul>
  )
}

As you can see from the above code, we created App context(AppContext) using createContext and wrapped everything inside App component with AppContext.Provider and passed a value(whatever data that needs to be sent to the child components) prop. Inside ListItem component, we used useContext hook and passed the AppContext to it and extracted the searchText. It is interesting to notice that we didn't pass the searchText to the List and ListItems components.

That's all for this article.
Thank you.

Lazy loading in react

abhmohan — Wed, 13 Jul 2022 07:06:31 +0000

Hello guys,

In this article we will see what is lazy loading and how can we lazy load a component.

Lazy loading means loading a component when it is required.

Let's consider a scenario where we have a list of persons and when we click on any of them, a dialog opens which shows the details about the person. Now this dialog opens only when we click the persons. Let's compare this scenario with the definition of lazy loading. Dialog component is not required when we are displaying the list of persons. It is required only when we click on any of the persons. So we can lazy load the Dialog component.

Let's name this Dialog as PersonDetails component and let's lazy load it.

To do lazy load, we can either use lazy provided by react or we can use some other npm libraries. I am going to use @loadable/component.

Let's install @lodable/component first.

npm i @loadable/component;

Below is our App.js component. I have used create-react-app to create the project.

import './App.css';
import { useState } from 'react';
import loadable from '@loadable/component';
// **Without lazy loading**
// import PersonDetails from './components/PersonDetails';

// **With lazy loading**
const PersonDetails = loadable(() => import('./components/PersonDetails'),
{ fallback: <div>Loading...</div> });

const persons = [
  {
    name: 'John',
    lastName: 'Doe',
    dob: '15th June 1990',
    place: 'London',
    contry: 'The Great Britain',
    contact: '123456'
  },
  {
    name: 'Jane',
    lastName: 'Doe',
    dob: '15th July 1990',
    place: 'London',
    contry: 'The Great Britain',
    contact: '654321'
  },
  {
    name: 'Frank',
    lastName: 'Doe',
    dob: '15th August 1992',
    place: 'New York',
    contry: 'USA',
    contact: '123456'
  }
];

function App() {
  const [person, setPerson] = useState(null);
  const handleClick = (person) => () => {
    setPerson(person);
  }

  const handleClose = () => {
    setPerson(null);
  }

  return (
    <div className="App">
      {persons.map(person => {
        return (
          <div key={person.name} className='person' onClick={handleClick(person)}>
            <span>{person.name}</span>
            {' '}
            <span>{person.lastName}</span>
          </div>
        )
      })}
      {person && <PersonDetails person={person} onClose={handleClose} />}
    </div>
  );
}

export default App;

As you can see how I am using @loadable/component to lazy load PersonDetails component.

const PersonDetails = loadable(() => import('./components/PersonDetails'),
{ fallback: <div>Loading...</div> });

Now why lazy load and how does it affect our application.

Without lazy load we would include the PersonDetails component in the bundle.js thereby increasing the bundle size where with lazy load we extract the PersonDetails to another chunk which gets loaded only when we click on the person list.

Below image shows how everything was bundled into one js(bundle.js) (without lazy loading).

Below image shows how we extracted PersonDetails into a separate js chunk (with lazy loading) and it gets loaded only after we click on the person list.

Here is the github lazy loading

That's all for this article.
Thank you for reading.

React memo

abhmohan — Wed, 14 Jul 2021 10:25:34 +0000

Hello Guys...

In this post I will explain how we can make use of React memo to improve the UI performance.

Prerequisite

Before you dive into the article, it is important you understand what react hooks are. It is also important to understand how a HOC(Higher Order Component) works. If you are new to these concepts, I will suggest you to go through the official documentation.
Here is the link to hooks (hooks).

Here is the link to HOC (HOC).

When we build an application, it is important we consider different ways of improving the performance because every second or even every millisecond matters for the user.

Once of the ways to improve UI performance is by avoiding unnecessary rendering. Wrapping a component with memo helps us avoid unnecessary rendering. React memo basically gives a memoized version of the component. When I say avoid unnecessary rendering I mean not rendering a component when it's props have not changed.

Let us see an example.

  import MyComponent from './MyComponent';

  const MyApp = () => {
    const [incrementValue, setIncrementValue] = useState(0);
    const [decrementValue, setDecrementValue] = useState(0);

    const handleIncrement= () => {
      setIncrementValue(incrementValue + 1);
    }

    const handleDecrement = () => {
      setDecrementValue(decrementValue + 1);
    }
    return (
      <div>
        <button onClick={handleIncrement}>Increment</button>
        <button onClick={handleDecrement}>Decrement</button>
        // 1st MyComponent
        <MyComponent key='1' value={`Increment-${incrementValue}`} />
        // 2nd MyComponent
        <MyComponent key='2' value={`Decrement-${decrementValue}`} />
      </div>
    )
  }

  // MyComponent.js
  const MyComponent = ({ value }) => {
    console.log('I am being rendered', value);
    return (
      <p>Value is {value}</p>
    )
  }

  export default MyComponent;

Above I have a component MyApp which renders couple of buttons. The first button increases the incrementValue and the second one decreases the decrementValue. Also I have couple of MyComponent components.

Let's try to understand what MyComponent is doing here.

MyComponent takes a value prop and displays the value. I have added a console statement to clearly understand which component is getting rendered.

Now when I load MyApp component, you will see

  I am being rendered Increment-0    //1st MyComponent
  I am being rendered Decrement-0    //2nd MyComponent

in the console because the App was rendered for the first time. Fair enough.

Now I click on Increment button. What do you this should be logged in the console.

  I am being rendered Increment-1   //1st MyComponent
  I am being rendered Decrement-0   //2nd MyComponent

This means both the MyComponent were re-rendered. If you look closely at the 2nd MyComponent, the prop value did not change because nothing happened to decrementValue when we clicked the Increment button. It is still the same(0) but was re-rendered. So this is an unnecessary render. How do we avoid re-rendering of 2nd MyComponent?

Let's make a small change in the MyComponent.js

  import { memo } from 'react;
  const MyComponent = ({ value }) => {
    console.log('I am being rendered', value);
    return (
      <p>Value is {value}</p>
    )
  }

  export default memo(MyComponent);

Now when we reload MyApp, for the initial rendering we will still see

  I am being rendered Increment-0    //1st MyComponent
  I am being rendered Decrement-0    //2nd MyComponent

in the console.

Now I click the Increment button. What do you think will be logged to console!!!

  I am being rendered Increment-1    //1st MyComponent

This means only 1st MyComponent was rerendered because its *value * prop changed but for the 2nd MyComponent nothing changed, so it didn't re-render.

So we saw how React memo helps in avoiding unnecessary rendering thus improving the UI performance.

This is a very simple example where I demonstrated how react memo
helps us in avoiding unnecessary rendering. But we have to understand when should a component be wrapped with memo because memoizing something comes with a cost.

Usually,
1. if a component is light weight and renders with different
props, you may not want to memoize it.
2. if a component is heavy and it renders with same props,
you would like to memoize it.

Note - This is a simple example where the component accepts a simple string prop. We can all also have a function as a prop and for a function prop we can memoize it with using useCallback hook to avoid unnecessary rendering.

Conclusion

React memo is one of the ways to improve the UI performance. It might not that relevant when the application is small, but as the application grows, it becomes very important to check for different ways to improve the performance of the application.

useEffect - react hook

abhmohan — Tue, 25 May 2021 07:26:49 +0000

Hello guys,

In this article I will explain how does useEffect work.

Prerequisite

Before you dive into the article, it is important you understand what react hooks are. If you are new to react hooks, I will strongly recommend to go through the official documentation. Here is the link(hooks).

Let's start.

useEffect is a react hook which is used to perform side effects(updating DOM, making asynchronous calls...). It basically accepts two arguments.

callback function
dependencies array(which is optional and it actually decides when the callback function be fired)

Below is the syntax of useEffect.

    useEffect(() => {

    }, [dependency1, dependency2])

Now we can have three scenarios with dependencies array.

1. No dependency array

    useEffect(() => {

    })

In this scenario, the callback gets fired after the initial rendering and everytime any of the component state changes.

2. Empty dependency array

    useEffect(() => {

    }, [])

In this scenario, the callback gets fired only once after the initial rendering.

3. With dependencies

    useEffect(() => {

    }, [dependency1, dependency2])

In this scenario, the callback gets fired after the initial rendering and every time any of the dependencies in the dependencies array changes.

Let's try to justify above scenarios.

Below I have a component MyApp which basically renders couple of buttons. The first button increments the increment value where as the second button decrements the decrement value.

export const MyApp = () => {

  const [increment, setIncrement] = useState(0);
  const [decrement, setDecrement] = useState(0);

  // useEffect 1, 1st scenario
  useEffect(() => {
    console.log(increment, 'without dependency array');
  });

  // useEffect 2, 2nd scenario
  useEffect(() => {
    console.log(increment, 'empty dependency array');
  }, [])

  // useEffect 3, 3rd scenario
  useEffect(() => {
    console.log(decrement, 'with dependency/ies');
  }, [decrement])

  const incrementCounter = () => {
    setIncrement(increment + 1);
  };

  const decrementCounter = () => {
    setDecrement(decrement - 1);
  };

  return (
    <div>
      <button onClick={incrementCounter}>Increment</button>
      <button onClick={decrementCounter}>Decrement</button>
    </div>
  );
}

Also I have 3 useEffects describing the 3 scenarios(discussed above).

Now let's try to understand what happens when I click different buttons, what gets logged to console and why.

When the MyApp component is loaded for the first time, we will see

  0 "without dependency array"
  0 "empty dependency array"
  0 "with dependency/ies"

logged to the console because we have 3 useEffects and each one is called after the initial rendering.

Now I click the Increment button. What do you think will be logged to console?

  1 "without dependency array"

What happened here!!!
The increment counter was changed to 1 from 0.That means component state changed. So...

Callback of useEffect 1 was fired. Therefore 1 "without dependencies array" was logged to console.

Callback of useEffect 2 was not fired because the dependencies array is an empty one.

Callback of useEffect 3 was not fired because the dependencies array does not include increment.

Now I click the Decrement button. What should be logged to console?

  1 "without dependency array"
  -1 "with dependency/ies"

What happened here!!!
The decrement counter was changed to -1 from 0.That means component state changed. So...

Callback of the useEffect 1 was fired. Therefore 1 "without dependencies array" was logged to console.

Callback of useEffect 2 was not fired because the dependencies array is an empty one.

Callback useEffect 3 was fired because the decrement is in the dependencies array. Therefore -1 "with dependency/ies" was logged to console.

Conclusion

So to conclude, we can say the callback function of the useEffect hook is fired based on how and what we supply into the dependencies array.

That's all for this article. Hope this article was helpful in understanding how the useEffect hook behaves based on the dependencies array.

Please leave any feedback, comment or suggestion.

React custom hook to fetch data

abhmohan — Fri, 21 May 2021 13:48:18 +0000

Hello Guys,

In this post, I will explain how to create a custom hook which will fetch data and how can we reuse it in different components.

React hooks are relatively new compared to class components. If you are new to hooks, I will strongly recommend to go through the official documentation. Here is the link hooks.

Hope you have an idea about hook.So let's start.

const useFetch = (url, options) => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    useEffect(() => {
        const fetchData = async () => {
            try {
                const resp= await fetch(url, options);
                const data = await resp.json();
                setData(data);
            } catch (e) {
                setData([]);
                setError(e);
            }
        }

        fetchData();
    }, []);
    return { data, error }
}

Let me explain what I have done here.

I have created a custom hook useFetch which is basically a function which takes in two arguments(url and options) and it returns an object with state(data, error).

I have used two react hooks(useState and useEffect).

useState is a hook that allows you to have state variables in functional components.

useEffect is a hook that allows to have side effects from within functional components(updating DOM, making asynchronous call..). It accepts two arguments, first one is the callback and second one is the dependencies array. Anytime if any of the dependency in the dependencies array changes, the callback is fired.

In our case useEffect has no dependencies. So that means our callback function will be called only once(you can imagine how componentDidMount works in a class component). Inside the callback, we have fetchData which is a async function, which actually does a fetch call with the url and options.

We can extend this to have a loading state. Let me add the loading state into our hook.

const useFetch = (url, options) => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const [isLoading, setIsLoading] = useState(false); 
    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            try {
                const resp= await fetch(url, options);
                const data = await resp.json();
                setData(data);
            } catch (e) {
                setData([]);
                setError(e);
            }
            setIsLoading(false);
        }

        fetchData();
    }, []);
    return { data, error, isLoading }
}

Now then we have added the loading state, let's see how we can consume this hook in different components.

Let's assume we have a component Component1.js and I want to consume the custom hook that we just created.

const Component1 = () => {
    const { data, error, isLoading } = useFetch('someUrl', { method: 'get'});

    if (isLoading ) {
        //Show a loader here because fetch is still going on.
        // return <Loader />
    }

    if (error) {
        // Show some error message
        // return <ErrorState />
    }

    return (
        // Do something with data
    )
}

I can consume the custom hook in different other components.That means I can reuse the state(data, error, isLoading) in other components too and that was the main idea behind hooks(Reuse state).

Hooks are really great addition to the react. We can make use of react features without writing class components.

That's it for this article. I hope this helped you.
Leave any feedback, suggestion, question if you have and most importantly keep learning.