DEV Community: Ankur Kumar

Three essential react hooks that will supercharge your next webapp.

Ankur Kumar — Fri, 20 Aug 2021 12:05:03 +0000

Let's be honest, we all want to become better react developers. We all have been there where hacking together a todo app or a weather app made us feel like a bad-ass. It's time to move ahead and learn few advanced react hooks that will arm us to build more cool and complex webapps.

Take a deep dive and understand the practical usage of these three advanced React Hooks.

useEffect
useReducer
useContext

useEffect Hook

To better understand useEffect, we need to be aware of two important things-

What is React's main job?

React's main job is to render the UI, react to user's interaction with the UI and then again re-render the UI based on the type of interaction. This is only what react as a library cares about i.e to bring the UI on the screen.

What are side-effects ?

All such tasks/operations happening inside our react component that are not directly related to bringing UI on the screen but are absolutely necessary in certain cases(example - to populate the UI with data, we need to fetch data from an external API source) to produce a end-result(or, UI) can be regarded as side-effects.

Operations like -

Sending HTTP requests to the remote server and handling potential errors. All modern web apps do this, we do not need specifically need react's mechanism for that.
Storing data in browser's native storage.
Setting and managing timers, etc.

All these tasks must happen outside of the normal component evaluation and render-cycle, especially since these tasks may delay/block rendering of the UI.

We use useEffect hook to handle such side-effects related code, in simpler terms this hook creates a portal for such potentially performance-intensive code, so that this block of code will be executed outside the normal component evalutation and will not hinder the rendering of UI.

useEffect hook takes 2 arguments -

An anonymous function that holds the side-effect.
A dependency array that allows us to gain control over the hook and let us determine when the hook should be called.

Syntax

import { useEffect } from "react";

function App() {

 useEffect(()=> {
   //side-effect code
 }, [x, y]) // x, y are placeholders for state/props/methods.

 return (
   // JSX
 );
};

Things to keep in mind when using the useEffect hook -

This anonymous arrow function that holds the side-effect code is executed only after evaluation of the component has completed.
If the dependency array is an empty array [ ], the useEffect will run only once after the initial mounting of the component.
useEffect is triggered when one of the dependencies gets updated. The dependencies can be a state, props.The useEffect will run again after react has finished the component evalaution because one of the items in dependency array was updated in last component render/evaluation cycle.
useEffect is triggered when the component unmounts the DOM.

A word of caution

import { useEffect } from "react";

function App() {

 useEffect(()=> {
   //side-effect code
 }, ) // No dependency array

 return (
   // JSX
 );
};

is same as

function App() {

 //side-effect code
//this code will be executed everytime the component is re evaluated

 return ( 
   // JSX
 );
};

We should never leave the 2nd argument unmentioned, otherwise we won't be able to leverage the advantage of useEffect hook.

Some RULES that will help deciding what should we mention inside dependency array :

Do not to add "built-in" APIs or functions like fetch(), localStorage etc (functions and features built-into the browser and hence available globally). These browser APIs / global functions are not related to the react component render cycle and they also never change.
Do not add variables or functions we might've defined outside of our component (e.g. helper function in a separate file) Such functions or variables are not created inside of a component function and hence changing them won't affect your components.
Do not add state updating functions, react guarantees that those functions never change, hence we don't need to add them as dependencies(you could though).

useEffect Cleanup

There are two types of side-effects : one requires cleanup another does not. Also, The type of operation done in useEffect might be a problem. If it was performance intensive code then it might slow down the app, if we would be sending HTTP request to check if login details are correct, our current useEffect would
send a lot of uncessary requests, that will lead to network traffic.

Syntax

import { useEffect } from "react";

function App() {

 useEffect(()=> {
   //side-effect code

  return () => {}

 }, [x, y]) // x, y are placeholders for state/props/methods.

 return (
   // JSX
 );
};

NOTE:

When the useEffect runs for the very first time i.e when component mounts the DOM, cleanup doesnot run.
Now for every useEffect execution after the point (1), cleanup will run first and then only sideeffect code runs.
Cleanup runs when the component unmounts the DOM.

When to use useEffect

Control a piece of code.
Avoid potential infinite loop because we are triggering a state update inside our component.
It also helps avoiding running the performance intensive code along with every component re evaluation.

useReducer() Hook

This is another built in React Hook. It Helps in state management.
This hook is to be used to manage complex state in react components. It adds more structure to the state and also combine all methods that cause a state update at one place.
It accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)

We can import useReducer from react just like the other React hooks, as seen in the following snippet:

import React, { useReducer } from 'react';
const [state, dispatch] = useReducer(reducer, initialState);

This hook function returns an array with 2 values. The first one is the state value, and the second value is the dispatch function which is further used to trigger an action with the help of array destructuring.

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

Here, is an example to better understand the useReducer hook.

// reducer function
const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

useContext

useContext hook allows you to easily share app wide or component wide state and state updating methods easily.

But, we need to understand what was the need of useContext hook in the first place?

What is Prop Drilling?

When we need to pass down state or methods from a component sitting at the top of component tree hierarchy to the component sitting low at the hierarchy, and in this traversal we have to pass them props even to those component which dont necesarrily need it, they act merely as carrier components. As the component tree starts getting bigger, it becomes more complex to pass down props and methods to every component, this is where useContext hook comes for the rescue.

create a context first:

AuthContext.js


import { createContext } from "react";

// Create context object
// Takes a default context in argument.
// Context -> App  or component wide state.

// AuthContext is an object that contains a component
const AuthContext = createContext ( { 
    isLoggedIn : false,
} );

export default AuthContext;

To use context in the app, we need to do things -

Provide it = all the components that are wrapped by it should have access to it.
Consume it -> Hook into it -> Listen to it

App.js ->


import AuthContext from './store/auth-context';

function App () {
  // Something
   return ( 
     // AuthContext is just an object, whose .Provider proprty is 
        a Component
    <AuthContext.Provider>
      // JSX
     // root component here
    // Auth-Context provider is a component we can use in our JSX code, and we can wrap it around other components and those other components and all their descendant components. So all their children and their children's children and so on all those components will now have access to that Context.
    </AuthContext.Provider>
  );
}

we can listen in two ways. We can listen by using Auth-Context consumer or by using a React Hook (Recommended way).

This hook allows you to tap into the context and use it.

import React, { useContext } from 'react';

import AuthContext from './AuthContext.js';

const Navbar = (props) => {
  const ctx = useContext(AuthContext);

  return (
    <nav className={classes.nav}>
      <ul>
        {ctx.isLoggedIn && (
          <li>
            <a href="/">Users</a>
          </li>
        )}
      </ul>
     </nav>
)

Conclusion

These three advanced react hooks allows you to build more powerful and robust frontend web applications. The vast usage of react hooks have made modern way of building web apps easier.

Happy Coding!

Styled-Components : Efficiently write CSS in JS File.

Ankur Kumar — Fri, 20 Aug 2021 11:23:45 +0000

Building web apps with React is not just about composing components together and making sure that the logic works correctly. That arguably is the most important part, where at least it's the biggest reason for using React. But building react apps is also about styling those apps.

We want to make sure that our web applications look good and styling is also an important part of building components.

Styled-components is a CSS-in-JS styling library that uses tagged template literals in JavaScript and CSS rules to provide pre-styled components where the styling is scoped to that react component only.

The button as a JavaScript variable and the styles defined in backticks are plain old CSS styles. We can also see the nested style property with plain CSS styles.
This is how styled-components renders CSS in JavaScript.

Styling React components

There are primarly two ways to style a React component.

Inline Styling

const style = {
  color: 'blue',
};

function App() {
  return <div style={style}>Hello World!</div>;
}

Inline styling has one of the highest specificity value which will override any other CSS rule. This method is highly discouraged, as it is neither sustainable nor scalable.

External Styling

There’s this more traditional way of using CSS in external CSS files, which is then passed as a string to the className prop

return (
  <div className="red-text"> some text </span>
)

As the component tree grows, CSS files begin to get bulky, clumsy, and complex. One great alternative solution to this is the usage of SASS. Although SASS helps, you’ll eventually deal with the same issue due to the sheer number of SCSS files a project can have.

Finally, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed by the browser, CSS is generated as a style element and attached inside <head></head> of the HTML document.

Why should you use Styled-Components

You have freedom to build custom pre-styled components. You no longer need to keep switching between a JS file and a CSS file but you can build your styled react components in one go.

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;

return (
  <div>
    <Button>Normal Button</Button>
  </div>
);

No class name bugs. styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
Use Power of Sass. When using styled-components you can easily use SASS like features like nesting.
Easier deletion of CSS. It can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
Simple dynamic styling. Adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
Automatic vendor prefixing. Write your CSS to the current standard and let styled-components handle the rest.
You get all of these benefits while still writing the CSS you know and love, just bound to individual components.
Painless maintenance. You never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
Automatic critical CSS. Styled-Components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.

Will it cost you performance ?

If you are not using native CSS inline styles, there is always a possibility of having some performance overhead with any open source library you choose to use for styling. However, the little performance overhead you get is the price you pay for the power and flexibility you get from styled-components.
The good thing is that styled-components is focused on improving the library’s performance on every new release. It keeps getting better.

Conclusion

Styled-components has a rapidly increasing community, with over 33,000 members on GitHub, which is highly encouraging and testifies to the project's long-term viability. It just keep getting better.

Happy coding!