DEV Community: Amogh Nandodkar

useRef in React

Amogh Nandodkar — Fri, 11 Feb 2022 14:59:38 +0000

Getting started with `useRef`

To get started with useRef hook we first need to import it from React as :

import { useRef } from 'react';

The hook only takes a single initial value and returns a ref.

const initialRef = useRef(null);

In the above example we created a ref named initialRef and it is set to a default value of null. useRef assigns the ref to an object having a current property,

{ current : null }

Looking at the above example you might be thinking why don't we use the useState instead of useRef hook. The main difference between the useState and useRef is that the later persists between renders and doesn't cause the component to re-render each time its value changes.

Using `useRef` hook

Until now we have understood that the main use of ref is for storing value between renders.

The most common use of refs is to reference the DOM elements, in fact every DOM element has a ref property which can be used for setting ref to the element.


function InputWithButton() {
  const initialRef = createRef(); 
  const handleClick = () => {
    initialRef.current.focus();
  };
  return (
    <div>
      <input ref={initialRef} type="text" />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

In the above example, we have used the ref property of the input ref in order to set the current property. When we click the button it calls the handleClick which uses the current value to set focus on the input element. Thus being able to access any DOM element by using the useRef hook is extremely useful for managing attributes which cannot be directly controlled in React.

Conclusion

useRef hook in React is extremely useful for storing data between renders without causing the element to re-render each time. It can also be used for accessing DOM elements.

useContext in React

Amogh Nandodkar — Tue, 01 Feb 2022 14:20:04 +0000

Understanding Context API

In order to understand useContext we need to first understand the context API. As we know, react uses state to store data and props to pass data from one component to another. This approach works well when there are only few components involved but gets more complex as the number of components increases. When deeply nested components are involved we end up using prop drilling in order to pass the props to the single component that is far down the hierarchy.

Context API simplifies this approach. Using context API we can specify certain data that needs to be available to all the components inside the context thus there is no need to pass the data through prop drilling or by any other approach. The data passed using the context API can be made available to all the components within that particular application. Here is an example:


const ResultContext = React.createContext();

export const ResultContextProvider = ({ children }) => {
  const [results, setResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState('tesla');

  return (
    <ResultContext.Provider value={{ getResults, results, searchTerm, setSearchTerm, isLoading }}>
      {children}
    </ResultContext.Provider>
  );
};

In the above example we created a new context using React.createContext(). This gives us a provider part and a consumer part.

The provider part provides values to all the components nested inside it. In the above example the value is a single object with getResults, results, searchTerm, setSearchTerm and isLoading in it.

The second part is the consumer. We need to wrap the code of the component in the consumer for it to be able to access the value of the context. Having to wrap the JSX in a component with the consumer adds extra layers of code. We can avoid all this mess in functional components by using the useContext hook.

`useContext` Hook

In order to start using the useContext we need to first import it as


import React, { createContext, useContext } from 'react';

Further we can set up the context provider in a way similar to context API.


const ResultContext = createContext();

export const ResultContextProvider = ({ children }) => {
  const [results, setResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState('tesla');

  return (
    <ResultContext.Provider value={{ getResults, results, searchTerm, setSearchTerm, isLoading }}>
      {children}
    </ResultContext.Provider>
  );
};

With the help of useContext hook we can avoid the consumer part of the context API. We can do that in the following way:


import { useResultContext } from '../contexts/ResultContextProvider';

const Navbar = ({darkTheme, setDarkTheme}) => {
    const {results ,searchTerm} = useResultContext();

    return (
        <div className='flex flex-row text-center '>
              <div className='text-sm text-gray-400 text-center'>{results}</div>  
              <div className='text-sm text-gray-400 text-center'>{searchTerm}</div> 
        </div>
    )
}

export default Navbar

In the above example we directly import useResultContext and it gives us all the context values which can be used as required.

Conclusion

The useContext hook simplifies the code as compared to the traditional context API which makes it fun to work with.

useEffect in React

Amogh Nandodkar — Fri, 28 Jan 2022 15:24:31 +0000

Transitioning from Classes to Functions

In class components, lifecycle methods are normally used for mounting or updating components. While working with functional components there are no lifecycle methods and useEffect hook is present which can be used for mounting or updating operations.
To start using the useEffect hook in the functional components we need to import it from react as:

import { useEffect } from 'react';

Creating a basic side effect

In class components all the side effects are used by the lifecycle methods. This approach is fairly simple when a few side effects are involved, but when multiple side effects are involved that required to be cleaned up this approach gets confusing. With useEffect, each side effect is defined along with it's clean up in it's own useEffect hook.

The most basic side effect can be achieved by passing a single function to the useEffect. This function is the side effect you want to run.


useEffect(() => {
   console.log('This is your first side effect!')
});

This side effect will run each time the component renders that is when the component is first mounted or when the prop or state changes. This is not ideal if the side effect is only desirable when the component mounts or when a certain state/ prop changes. For this reason the useEffect hook accepts an optional second parameter which is an array. The values of this array are compared during each re-render with the values of the array during the previous render and the side effect will only run if the values of the array differ from the ones during previous render. Hence to run the side effect on mount you need to pass an empty array as the second parameter so that the value would not change between subsequent re-renders. This can be achieved as:


useEffect(() => {
   console.log('Run side effect on mount')
},[]);

By putting a value in the second array parameter of the useEffect hook allows the side effect to run each time the value inside the array changes. This can be achieved as:


useEffect(() => {
   console.log('Run side effect on value change')
},[value]);

Now let us have a look at a more complex example


const [userText, setUserText] = useState("");
const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;
    if(keyCode === 32 || (keyCode >= 65 && keyCode <= 90)){
        setUserText(prevUserText => `${prevUserText}${key}`);
    }
}, []);

   useEffect(() => {
       window.addEventListener("keyup", handleUserKeyPress);

      }, [handleUserKeyPress]);

      return (
          <div>
              <h1>Feel free to type!</h1>
              <blockquote>{userText}</blockquote>
          </div>
  );

Here the side effect runs each time the value of the handleUserKeyPress changes.

Cleaning the Side Effects

With the knowledge to set up the side effect, we now have to understand how to clean up the side effect. The useEffect accepts a third parameter which is a return function which runs each time the side effect runs. Using our previous example:


useEffect(() => {
   console.log('This is your first side effect!')

   return () => {
     console.log('This is your first clean up!')
   }
});

Let us now have a look at how to implement a cleanup for our earlier window object side effect.


const [userText, setUserText] = useState("");
const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;
    if(keyCode === 32 || (keyCode >= 65 && keyCode <= 90)){
        setUserText(prevUserText => `${prevUserText}${key}`);
    }
}, []);

   useEffect(() => {
       window.addEventListener("keyup", handleUserKeyPress);
       return () => {
         window.removeEventListener("keydown", handleUserKeyPress);
    };

      }, [handleUserKeyPress]);

      return (
          <div>
              <h1>Feel free to type!</h1>
              <blockquote>{userText}</blockquote>
          </div>
  );

Here the return function is the clean up function which removes the event listener.

Conclusion

The useEffect hook simplifies the side effects and clean up in components when props or state changes. In comparison to the lifecycle cycle methods in class components the useState hook helps in organizing the side effects as each side effect gets its individual hook.

DEV Community: Amogh Nandodkar

useRef in React

Getting started with useRef

Using useRef hook

Conclusion

useContext in React

Understanding Context API

useContext Hook

Conclusion

useEffect in React

Transitioning from Classes to Functions

Creating a basic side effect

Cleaning the Side Effects

Conclusion

Getting started with `useRef`

Using `useRef` hook

`useContext` Hook