Forem: Juraj Pavlović

Bad ReactJs practices to avoid

Juraj Pavlović — Mon, 15 Nov 2021 06:29:10 +0000

There are plenty of articles and blogs that contain useful information on how to do things the right way. Best practices, good design patterns, clean code style, proper state usage, etc...
Therefore I've decided to take things the opposite way and look for how not to do things!
This article will state the bad practices and combine them into an enjoyable read.

Using state for too much stuff

While a ReactJS state created with useState or useReducer is useful, not everything should be placed within it. A lot of new developers struggle with this very concept. They do not know when to put something in the state and when not to.

An example would be storing data in the state which should have been derived from the state. Let's say you have a state that represents a filled shopping cart on a webshop. The bad practice would be setting the total price inside the state too. One can simply compute the value from the state already.

Simple computational tasks or variables exist for that particular reason. The usual idea is to store as little data as possible in your state. Before you place data in the state, ask yourself if you can get the needed data from the other stored variables or state.

Using Redux when you don't need it

I just had to put this eternal React developer's debate in here. Developers ask and say stuff like: "Should I use Redux or should I use Context?", "Just use Context instead of Redux" or "Is Context a good replacement for Redux?"
There are many tools and mechanisms that partially do what Redux does. This in short explains the questions and statements mentioned above.
Let's try to settle this debate once and for all.

Redux & Context
Many developers tend to think that Context by itself is a state management system. It is not! Context is a dependency injection mechanism.
Inside it you can put anything your heart desires, it can become a state management system if you implement it that way. One has to use useState and/or useReducer hook to manage the state inside it. That way, you are deciding where the state lives and you are handling how to update it and where exactly you wish to use it.
Context was made exactly to avoid passing data through many layers of components. If you only need to tackle this issue, then just use Context.

Redux & caching
Most applications need a cache of some sort for server state these days.
If we stick to the REST API's there are a couple of libraries that do the caching for you. For example React Query or Vercel's swr both do a good job for REST API.
If we use a more modern approach with GraphQL, caching is really easy with Apollo Client.
If caching is the only necessity in your app, you do not need Redux in your app at that point.

What is Redux used for then?
Redux is a generic state management tool. It has a lot of use-cases simultaneously. The most noticeable ones are: Caching state, UI state, complex data management on client, middlewares, etc.
In the end, it all depends on what specific problem is the app you are building trying to solve. Usually, you will only need the partial Redux features (global state management, caching).

Declaring components inside of components

This is severely bad because of a multitude of reasons:

The code becomes very coupled. The inner components become dependant on the scope of the parent's component.
Inner components are almost non-reusable. You cannot export the inner components, you can only pass them as props further down the scope, which is not ideal.
Performance. On each parent's component's render, the declaration function for the inner component will be re-created. To explain this further, inner component's lifecycle methods will be called each render cycle. Along with the performance issues, the previous state will be lost as well.

Keep the components in their respective files to avoid this issue.

Using props in Initial State (in some cases)

Keep in mind that using the initial state for generic components such as counter component from the official React docs is perfectly fine. In a more detailed manner, this means setting props to state in order to initialize the state of a component with a non-reactive prop.

Outside the provided example, the initial react state should not be set to a value of a reactive prop. Why? Well because that state will not get changed unless you call the state setter, a setState function. If the props from the upper level get changed, the component will get the changed props, however, the state will stay the same as the initial prop value.
This issue destroys the single source of truth concept used in components. It is a bad practice and it should be avoided.

Using index as a Key

You render multiple items in React with array.map method. Keys must be unique so that React can handle proper tracking of that element or component. If you were to use the index as a key, that key can be a duplicate in some cases, which should be avoided.
Imagine having an array of items that you are going to render via .map and use the index as keys. Furthermore, imagine adding to the middle or removing an item from the middle of the array. Key will end up being the same as before, and React will assume it is the same identical element/component as before.
This could lead to undesired effects and should be avoided.

Using the spread operator frequently

Use-cases of spread operator are great. It helps us reduce the code and manage it in a more clear way if used properly. Spread operators are nice when declaring reusable components or creating new data objects that reuse data and even when passing arguments into a function.
However, a lot of times, developers make a mistake of using a spread operator on props and setting wrong or undesired props on a component. This can result in the following error showing up in the console:

Not using useEffect, useMemo & useCallback dependencies

The stated React hooks introduce a concept of dependencies. This is just an array of items which, when changed, will cause the hook to update. Managing the dependencies can be a bit tricky if you haven't done such a thing a couple of times. Dependencies array should consist of items that reflect the hooks and should not be crowded with a great number of those items.
ESLint static analysis has a rule that can help us use dependencies in those hooks.

The dependencies array can only be empty if you intend to use useEffect once when the component mounts.

Doing premature optimizations

Doing optimizations is usually a good thing, but it should not be done for every little tiny thing. To see the benefits from memoization, it is required to use hooks like useMemo or useCallback and even PureComponents. Developers need to be very focused and implement memoization with proper care because otherwise, it can break memoization one by one.
The following image says a thousand words:

Badly declaring TypeScript types

Most of us have grown to love TypeScript and cannot develop in JS without it anymore. Furthermore, most of us know about keywords known as any, never and unknown.
Unknown represents a set of all possible values, any value can be assigned to a variable of such type. It is a type-safe counterpart of any
Never represents an empty set, which means no value can be assigned to a such typed variable.
Those should be avoided most of the time. This can't be stressed enough. Developers tend to be frustrated at TypeScript and then just write one of these keywords to get it off their backs. This is a bad practice and should be avoided.

There is a place for using these keywords, but it should be done scarcely:

Use never in positions where there will not or should not be a value.
Use unknown where there will be a value, but it might have any type.
Use any if you really need an unsafe escape hatch.

Conclusion

There are many bad patterns we came across today and also how to avoid them and use proper patterns instead. If you learn to avoid these bad patterns, your life as a coder will be much easier and you will avoid many bugs and potential refactors.

Thank you so much for reading!

Resources:
https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html
https://isamatov.com/react-derived-state/
https://changelog.com/posts/when-and-when-not-to-reach-for-redux
https://blog.logrocket.com/when-to-use-never-and-unknown-in-typescript-5e4d6c5799ad/
https://levelup.gitconnected.com/react-best-practices-avoiding-bad-practices-fefe6062787d

How to extend an Ant Design component

Juraj Pavlović — Mon, 21 Jun 2021 11:00:33 +0000

Introduction

Developers using Javascript frameworks/libraries such as React, Vue or Angular often use a component library. Those provide completed components tied with plenty of functionalities and customisable design.

In this post we will learn about such a library and how to provide even more desired behaviours, functionalities and options to its components.
This is called component extension and it makes components even more reusable and easier to use.

Note: This post will be based on React, Typescript and AntDesign.

The what and the why

Ant Design (AntD for short) is the protagonist in this story. It is an extensive component library primarily made for React. It has versions for Vue and Angular too!

AntD offers plenty of components such as forms, inputs, menus, modals, loaders, notifications and much much more. We have been working with AntD for a while now and we have been greatly thankful for it.

As your applications grows, you start to use more and more components. These components tend to have very similarly written props and they start to stack up. Or in a completely different scenario, the component's design needs a change or its functionality needs more options. We developers try to use DRY principle as much as we can. Therefore the component extension is born.

You may be asking yourself when is a good time to extend a component? The correct answer is - whenever you start to use identical component on multiple places. This way you have a full control of it in the project.

How to do it

It is actually pretty simple.
Step one is to create a new .tsx component and name it accordingly to one's needs. Then we must import the actual component we want to extend and modify it to fit our needs.

DatePicker extend example

We create a component called DatePickerLocalised.tsx (the name is totally up to you) and import the AntD's DatePicker inside with the following import.

import { DatePicker as AntdDatePicker, DatePickerProps } from "antd";

This imports the DatePicker component and its interface for the props. Now all we have to do is make a functional component.

export const DatePickerLocalised: FunctionComponent<DatePickerProps> = (  
  props  
) => {  
  return (  
    <AntdDatePicker
      {...props}  
    />  
  );  
};

This is now a component which is an exact copy of the one from the component library AntD. Let's extend it by adding a locale date format.
What goes in the format prop can be seen in the AntD documentation for the DatePicker component.
Since I'm from Croatia, I'm going to use Croatian formats.

The whole component now looks like this:

import { DatePicker as AntdDatePicker, DatePickerProps } from "antd";  
import { FunctionComponent } from "react";  

export const defaultDateFormats = [  
  "DD.MM.YYYY.",  
  "DD.MM.YYYY",  
  "DDMMYYYY",  
  "DDMMYY",  
];  

export const DatePickerLocalised: FunctionComponent<DatePickerProps> = (  
  props  
) => {  
  return <AntdDatePicker format={defaultDateFormats} {...props} />;  
};

Now we can use this “localised” date picker throughout our whole app. No longer do we have to worry about the locale format being wrong! Amazing!

But what if we want to extend it even more, by adding custom props? It is also quite simple!
We have to create a new type with its DatePickerProps and add our own interface to the extension. All that remains is passing it down to the newly created component.

I have added fullWidth custom prop to the new interface ExtendedDatePickerProps and added a style prop in the AntdDatePicker.
Take a look at the following snippet:

import { DatePicker as AntdDatePicker, DatePickerProps } from "antd";  
import { FunctionComponent } from "react";  

export interface ExtendedDatePickerProps {  
  fullWidth?: boolean;  
}  
export type DatePickerLocalisedProps = DatePickerProps &  
  ExtendedDatePickerProps;  

export const defaultDateFormats = [  
  "DD.MM.YYYY.",  
  "DD.MM.YYYY",  
  "DDMMYYYY",  
  "DDMMYY",  
];  

export const DatePickerLocalised: FunctionComponent<DatePickerLocalisedProps> = (  
  props  
) => {  
  return (  
    <AntdDatePicker  
      style={props.fullWidth ? { width: "100%" } : undefined}  
      format={defaultDateFormats}  
      {...props}  
    />  
  );  
};

Now you can use the component with the custom prop anywhere in the application like this:

<DatePickerLocalised  
  fullWidth={true}  
  onChange={(newDate) => setDateState(newDate)}  
/>

Note the destructuring of props {...props} always goes at the bottom of the extended component. This is because of a need of overriding. E.g. the format prop which is set inside of the extend can be also passed when using the component. It will override the default created behaviour.

You can add anything you desire in your extends. From enums to creating validator functions. The components can be extended as far the eye can see.

Conclusion

You can now imagine the possibility of different reusable components you can create with the extension. It is really useful to customise the components and make them suitable for your needs.

We have reached the end, thank you for reading. I hope you have learned something new in this post.
Do you have something to add, do you have your own way of extending components? Tell me more in the comments.

Check out some of my other content!

If you are new to the Hooks world check out this article
If you have wondered about Top 10 React hook libraries? Then this is a perfect post for you!

ReactJS protected routes

Juraj Pavlović — Mon, 18 Jan 2021 09:39:44 +0000

Creating apps, products, or any sort of website in ReactJs is a mostly smooth sail. It is an excellent library for many occasions. Of course, like any other piece of JavaScript, it has its positives and negatives.

When it comes to security and protection, it is often a hassle and a complication to do in ReactJs. Therefore developers can be frequently seen adding libraries to beat those challenges.

In this small blog post, I will show you a super neat way of resolving a piece of those challenges. The public and private routes within the ReactJs application in TypeScript!. Let us begin.

The explanation

The explanation is going to be from the bottom up. This means we are going to start with the lowest level components moving upward.
Things we need are the following:

PrivateRoute.tsx component
- Routing/redirect components
- Login.tsx component
- Home.tsx component (a protected component) By using these components, we will build a good foundation for the protected and public parts of the app. It will be made so it supports updates and a good amount of routes.

The code

PrivateRoute.tsx

This is a crucial component of private routes. The bread and butter of this blog post. It is used to prevent any non authenticated users from accessing it. Additionally, it can have logic for special cases, just like in this example.

import React, { FunctionComponent } from "react";  
import { Redirect, Route } from "react-router-dom";  
import { PrivateRouteProps } from "src/root/routing/interfaces/PrivateRouteProps";  
import jwt_decode from "jwt-decode";
import { Redirect, Route, useHistory, useLocation } from "react-router-dom";

export const PrivateRoute: FunctionComponent<PrivateRouteProps> = ({  
  component: Component,  
  ...rest  
}) => {  
  const history = useHistory();
  // You can check special cases you need from the token. And then act correspondingly
  // E.g. If user is admin and the "user" part of the app is prevented for admin.
  // Here the data should be read from your token/cookies.
  // Prior to this you should have code to check whether the token is valid or invalid.
  const accessToken = localStorage.getItem("token");
  const decodedToken = jwt_decode(accessToken);

   if (decodedToken.userData.isAdmin) {
    history.push("/admin-panel");
   }

  return (  
    <Route  
      {...rest}  
      render={(props) => {  
        // logic for authenticated user to access /app part goes here.
        // e.g. check if user is logged-in logic.
        const isLoggedIn = true;  

        return isLoggedIn ? (  
          <Component {...props} />  
        ) : (  
          <Redirect to={"/login"} />  
        );  
   }}  
   />  
  );  
};

Routing components

We have AppRouting and NonAuthRouting here. AppRouting will be used when a user is authenticated. In other words protected routes. The NonAuthRouting will be used for routes that have components used to authenticate a user.

import { FunctionComponent} from "react";
import { SomeComponent } from "...";

export const AppRouting: FunctionComponent = () => {
  <Switch>
    // add your routes & additional routings which need authenticated user here.
    <Route path={"/some-auth-route"} component={SomeComponent} />
  </Switch>
}
};
import { FunctionComponent} from "react";
import { LoginComponent } from "...";

export const AuthRouting: FunctionComponent = () => {
  <Switch>
    // add your routes & additional routings to authenticate user here.
    <Route path={"/non-auth/login"} component={LoginComponent} />
  </Switch>
}
};

The Route view

This component is a wrapper for the two ones above. It will contain the main route passages for AppRouting and the NonAuthRouting. This component should be one of the uppermost components in your app from a level perspective. Near App.tsx or Index.tsx

import { FunctionComponent } from "react";  
import { Redirect, Route } from "react-router-dom";  
import { AppRouting } from "src/root/routing/AppRouting";  
import { NonAuthRouting } from "src/root/routing/AuthRouting";  
import { PrivateRoute } from "src/root/routing/PrivateRoute";  

export const RouteView: FunctionComponent = () => {  
  // redirects from "/" to "/home"
  const renderRootRedirect = () => <Redirect to={"/home"} />;  
  return (  
    <>  
      <Route exact={true} path="/" render={renderRootRedirect} />  
      <PrivateRoute path={"/app"} component={AppRouting} />  
      <Route path={"/non-auth"} component={NonAuthRouting} />  
   </>  );  
};

Conclusion

Public and private routes can be problematic to implement. A lot of developers search for tons of routing options and different implementations. Personally, I have found this approach works the best. Hopefully, it will help anyone who stumbles upon this!

Thank you for reading.

Check out some of my other content!
If you are new to the Hooks world check out this article
If you have wondered about Top 10 React hook libraries? Then this is a perfect post for you!

Top 10 React Hook libraries

Juraj Pavlović — Mon, 19 Oct 2020 10:35:07 +0000

Hooks came and took the React community by the storm. It’s been a while since their initial release, meaning there are a lot of supporting libraries. It is hard not to come by “hooks” word while searching for anything related to React. If you haven’t already, you should pick them up into your codebase as soon as possible. They will make your coding life much easier and enjoyable.

Keeping clean code style, readability, maintainability, fewer lines of code as well as reusability is crucial in the React development. This blog will present to you the top 10 React Hook libraries which you should start using immediately. It is based on personal preference. Without further delay let’s get on the way.

1. use-http

use-http is an incredibly useful package that is used as a replacement for Fetch API. Written and maintained with high quality. It makes your coding much simpler and understandable, more precisely the data consumption part. The hook itself uses TypeScript and even has support for SSR and GraphQL. It returns a response, loading, error data and different request methods such as Get, Post, Put, Patch and Delete.

Main features it provides are:

Request/Response interceptors
Suspense (experimental currently)
Retry functionality
Caching

It is well documented with both CodeSandbox examples and Youtube videos together with GitHub readme.

Usage example:

import useFetch from "use-http"

const Example = () => {
  const [todos, setTodos] = useState([])
  const { get, post, response, loading, error } = useFetch("https://example.com")

  useEffect(() => { get("/todos") }, [])

  const addTodo = async () => {
      await post("/todos", { title: "example todo" });
      if (response.ok) setTodos([...todos, newTodo])
  }

  return (
    <>
      <button onClick={addTodo}>Add Todo</button>
      {error && 'Error!'}
      {loading && 'Loading...'}
      {todos.map(todo => (
        <span key={todo.id}>{todo.title}</span>
      )}
    </>
  );
};

2. useMedia

Have you ever needed a way of tracking the CSS media query? The useMedia hook provides a simplistic approach to the problem. It is a sensory hook which tracks exactly that. Media queries are really important as well as the responsiveness of any app or website.

Written in TypeScript it offers its support. The package has well-defined documentation which explains the usage as well as the testing methods for the hook.

Usage example:

import useMedia from 'use-media';

const Example = () => {
  const isWide = useMedia({minWidth: '1000px'});

  return (
    <span>
      Screen is wide: {isWide ? "WideScreen" : "NarrowScreen"}
    </span>
  );
};

3. Constate

Constate is a hook package that provides lifting local state up to React Context. It means that any state from any component can be easily lifted to the context with minimum effort. This is useful in cases where you would like to use the same state in multiple spots, or provide the same state to multiple components. The name comes from a wordplay merging Context and State.
Written in Typescript and very small in size. The documentation is not so detailed, but it gets the job done.

Usage example:

import React, { useState } from "react";
import constate from "constate";

// custom hook
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
}

// hook passed in constate
const [CounterProvider, useCounterContext] = constate(useCounter);

function Button() {
  // use the context
  const { increment } = useCounterContext();
  return <button onClick={increment}>+</button>;
}

function Count() {
  // use the context
  const { count } = useCounterContext();
  return <span>{count}</span>;
}

function App() {
  // wrap the component with provider
  return (
    <CounterProvider>
      <Count />
      <Button />
    </CounterProvider>
  );

4. Redux hooks

Redux is a well-known tool for many, if not all, React developers. It is used as a global state manager throughout the application. It went onboard with hooks a couple of months after the React’s initial release. It offers an alternative to the HOC (Higher Order Component) pattern with existing connect() method.

Most notable hooks provided are:

useSelector
useDispatch
useStore

The documentation is quite good, a bit complex but it will provide you with any information needed to start using them.

Usage example:

import {useSelector, useDispatch} from "react-redux";
import React from "react";
import * as actions from "./actions";

const Example = () => {
const dispatch = useDispatch()
const counter = useSelector(state => state.counter)

return (
<div>
   <span>
     {counter.value}
   </span>
   <button onClick={() => dispatch(actions.incrementCounter)}>
     Counter +1
   </button>
</div>
);
};

5. React hook form

React hook form is a form hook library which is similar to Formik and Redux form, but better! With its much simpler syntax, speed, less rerenders and better maintainability it started to climb the GitHub ladders.
It is tiny in size and built with performance in mind. The library offers even its form builder which is great! It has one of the biggest amounts of GitHub starts for a React hooks library, 14.8k.

Usage example:

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    // logs {firstName:"exampleFirstName", lastName:"exampleLastName"}
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstName" ref={register} />
      <input name="lastName" ref={register({ required: true })} />
      {errors.lastName && <span>"Last name is a required field."</span>}
      <input name="age" ref={register({ required: true })} />
      {errors.age && <span>"Please enter number for age."</span>}
      <input type="submit" />
    </form>
  );
}

6. useDebounce

useDebounce represents a small hook which is used for debouncing. It is used to postpone function execution to a later time. Often used in inputs and forms which fetch data.

Usage example:

import React, { useState } from "react";
import { useDebounce } from "use-debounce";

export default function Input() {
  const [text, setText] = useState("Hello");
  const [value] = useDebounce(text, 1000);

  return (
    <div>
      <input
        defaultValue={"Hello"}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Value: {text}</p>
      <p>Debounced value: {value}</p>
    </div>
  );
}

7. useLocalStorage

useLocalStorage is a small hook just like the one above. It is really useful for extracting and setting the data inside localStorage. Manipulation is made easy.
Offers automatic JSON serialization and synchronisation across multiple tabs and is written in TypeScript so it offers types.

Documentation is written in a quality manner and is quite understandable with extended examples.

Usage example:

import React, { useState } from "react";
import { writeStorage } from '@rehooks/local-storage';

export default function Example() {
  let counter = 0;
  const [counterValue] = useLocalStorage('counterValue');

  return (
    <div>
      <span>{counterValue}</span>
      <button onClick={() => writeStorage('i', ++counter)}>
        Click Me
      </button>
    </div>
  );
}

8. usePortal

usePortal makes the creation of dropdowns, modals, notification popups, tooltips and much more, super easy! It provides creating elements outside the DOM hierarchy of the App (See how Portals work here).
The hook works with SSR as it is isomorphic. Written in TypeScript and has built-in state. It also offers the full customization of the portal styling and ton of other options.

Documentation written for it is quite good shows many examples which will be more than enough to start using the library/hook yourself.

Usage example:

import React, { useState } from "react";
import usePortal from "react-useportal";

const Example = () => {
    const { ref, openPortal, closePortal, isOpen, Portal } = usePortal()

    return (
      <>
         <button ref={ref} onClick={() => openPortal()}>
            Open Portal
         </button>
          {isOpen && (
            <Portal>
              <p>
                This Portal handles its own state.{' '}
                <button onClick={closePortal}>Close me!</button>, hit ESC or
                click outside of me.
              </p>
            </Portal>
          )}
       </>
 )
}

9. useHover

useHover is a React state hook which determines if a React element is being hovered. Easy and intuitive to use. The library is small, and simple to use, but can be powerful if you’re creative enough.

It offers the delay of the hover effect as well. TypeScript supported. Documentation is not as detailed, but it will show you how to use it fairly.

Usage example:

import useHover from "react-use-hover";

const Example = () => {
  const [isHovering, hoverProps] = useHover();
  return (
    <>
      <span {...hoverProps} aria-describedby="overlay">Hover me</span>
      {isHovering ? <div> I’m a little tooltip! </div> : null}
    </>
  );
}

10. React router hooks

React router is one of the most popular libraries for React. It is used for routing and getting the app URL history etc. Along with Redux it has implemented its hooks for getting such useful data.

Hooks offered are:

useHistory
useLocation
useParams
useRouteMatch

Its names are pretty self-explanatory. UseHistory will get the data of the app’s history and methods such as push which pushes to a new route. UseLocation will return the object that represents the current URL. UseParams will return an object of key-value pairs of URL params of the current route. Finally, useRouteMatch will attempt to match the current URL with the given one which can be a string or an object of different options.

Documentation is good and written with many examples

Usage example:

import { useHistory, useLocation, useRouteMatch } from "react-router-dom";

const Example = () => {
let history = useHistory();
let location = useLoction();
let isMatchingURL = useRouteMatch("/post/11");

function handleClick() {
history.push("/home");
}

return (
    <div>
        <span>Current URL: {location.pathname}</span>
        {isMatchingURL ? <span>Matching provided URL! Yay! </span> : null}
        <button type="button" onClick={handleClick}>
            Go home
        </button>
</div>
);
}

There are much more hook libraries out there, but these are the ones I’ve decided to talk about. Please try them out, I promise you won’t regret it. If you do happen to like them a lot, go and support them in any way. The hooks are still relatively a new way of doing this, but they are here to stay. In further months we expect even more brilliant libraries and hook examples to jump up to the surface.

Hope you have found this post interesting, and that you have learned something new. Have fun in your further exploration of the hooks! Happy developing.

Check out some of my other content!

If you are new to the Hooks world check out this article

If you are interested in learning how to write your custom hooks check this one out

Or perhaps how to start using hooks in a class-based React project, click here

How to use React Hooks in projects with existing class components

Juraj Pavlović — Mon, 07 Sep 2020 05:47:57 +0000

Introduction

Prior to the release of React Hooks, we all used class components, higher-order components and React lifecycle methods… they worked and are still working properly, but in some cases, they can also be a struggle to write. This so-called “old” style of writing code in React can sometimes be troublesome, unclean and hard to manage. And that’s where hooks come to the rescue!

This new style of coding sets many ReactJS developers’ minds at ease. But wait, it sometimes isn’t that easy to just flip the switch and use hooks. There are plenty of projects that are fully based on class components… and then there’s the unfinished projects.

What do we do with those? How do we approach further development of such cases? Well, I’ll give you some of the answers right here.

Component types

Apps in React always revolved around using class components for stateful or smart components, and function components for stateless or dumb components. React’s core methods and properties such as state, lifecycle methods and re-rendering based on a change of state could only be used in sturdy class components. That is exactly why those types of components were mostly used inside projects. Such components made the magic of React work and were a correct way of using all the goods that the library offered.

In addition to them, functional components were used on the bottom level — structurally speaking. This solely means that the last, hierarchical part, which presents the view layer itself, was mostly functional components. It is a part of the app which doesn’t need state as it gets the data from their parents and renders elements to the client.

Class-based components are often used along with HOCs or Higher-Order Components. HOCs represent a function that takes a component as an argument and returns an upgraded component (which can be stateful or stateless). It is a pattern used for connecting class components to external packages such as React Router and Redux. Keep this in mind as it will be one of the factors used for translating from classes to function components with hooks.

The hooks

On the other side of the story, the new proposed way of doing React coding is with hooks. Hooks represent a way of “hooking” into React’s methods, and providing access to all of the great features that React is offering within a function component. Since hooks enable you to use the state, function components are no longer named stateless components. Writing code using hooks makes a ton of stuff more trivial to implement. It makes the code cleaner, more DRY and reusable, simpler and easier to work with… and that is especially true when it comes to maintenance, upgrading and adding new features. All in all, React hooks greatly reduce the amount of code one has to write.

Another aspect of hooks that is very important to remember is that hooks cannot be used within class-based components. That is because they already have a way of using React’s methods… but there is a catch. HOCs can be used to provide hooks functionality to the class-based components. Since HOC is actually a function, it can use all of the hooks that React provides and pass data as props to a class-based component.

Here’s an example of such a case:

const authStateHOC = (WrappedComponent) => {  
  const initialState = createContext({  
  authState: {  
  email: "",  
  password: "",  
 },
 });  

const authStateContext = useContext(initialState);  

return (  
  <WrappedComponent  
   {...props}  
   value={authStateContext.value}  
   setValue={authStateContext.setValue}  
  />  
  );  
};

So yes, components can actually be tweaked using the HOC pattern to enable the usage of hooks inside class-based components. However, this is not suggested as the HOC pattern is something that developers are moving away from. Hard issues that HOCs solved, such as reusing logic, are now all in hooks. On top of that, by using this pattern you could end up lost in callback loop hell.

So what’s the solution?

React docs suggest that class-based components will not be deprecated with newer versions. But it also does not recommend writing class components anymore, since hooks are considered the future and a way to go. It is stated that further development should be done with the new hook syntax. Why? Because everything that was possible with class-based components is now achievable by using hooks… and in a much simpler way.

So, what should we do with class components then? Well, refactoring could be an option, but it isn’t mandatory because support for classes isn’t going anywhere. Also, it could end up really costly if we were to look at time consumption and/or project’s financial status. And this is especially true if the project is massive in scope.

While it might sound amazing to rewrite applications in order to use hooks, it does come at the cost… and that should not be treated lightly. If you do end up taking the refactor approach, take into consideration all that it would take to rewrite the code, so that it can use hooks… for example, how long will it take, or how many people need to be working on it.

The second way revolves around writing all of the new code with function components and hooks. And when you see yourself working in an older environment with classes, try to refactor a component or a couple of them to use hooks. Every time you go back and modify or update a particular feature which previously used classes, try rewriting it into hooks. This approach will allow you to slowly, but surely improve your codebase… and make it simpler and easier to maintain.

Quite a big number of libraries now offers support for hooks. For example, the aforementioned React Router and Redux (which are one of the most popular packages available for React) support it. They are used in almost every React app. This also suggests that if your project used, for example, the container pattern with HOCs, you can now use it much more easily with hooks. It also offers hooks such as useDispatch, useSelector and more. The router is more accessible with useHistory, useParams and useLocations hooks.

Hooks can do everything a class component can… and their reusable, clean and simplified functions are just another reason to implement them into your workflow.

Conclusion

Let’s conclude this story of hooks and class components
Many paradigms and patterns are moving more and more toward functional programming. Functional programming has so far solved or simplified problems that developers have been facing when using the object-oriented programming paradigm… problems such as getting lost in the obscurity of the code, or its WET state.

With functional programming, developers can focus on more items of importance, such as proper implementations and problem-solving. Also, keep in mind that refactoring an application is not a mandatory procedure, and you should always consider what’s best for your team and the project itself.

How to: ReactJs custom hooks

Juraj Pavlović — Mon, 13 Jul 2020 06:17:30 +0000

Quite some time has passed since we have introduced hooks in the codebase of our projects. Because of them, it has made the code reusable, cleaner, more readable and more satisfying write. They present the future of development with ReactJs that is for sure.
Other than the basic hooks provided by the library itself, you can write your own little hook! (or a big one :D). Those kinds of hooks are named Custom hooks. Taken straight from the React docs: A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. In this little how-to, I will be showing how you can do just that! (...and with TypeScript too)

A state hook (counter custom hook)

This example will show how to implement a simple counter custom hook. Internally it uses React's useState and returns it along with a couple of other functions inside an object. The returned object is written with shorthand property names syntax.

const useCount = () => {  
  const [count, setCount] = useState<number>(0);  

  const increment = () => setCount(count + 1);  
  const decrement = () => setCount(count - 1);  
  const increaseBy = (increaser: number) => setCount(count + increaser);  
  const decreaseBy = (decreaser: number) => setCount(count + decreaser);  

  return { count, increment, decrement, increaseBy, decreaseBy };  
};

Now, this hook can be used anywhere within a function component.
Usage example:

   const { count, increment, decrement, increaseBy, decreaseBy } = useCount();
   <div>
        <div>{count}</div>  
        <button onClick={increment}>increment</button>  
        <button onClick={decrement}>decrement</button>  
        <button onClick={() => increaseBy(20)}>increase by 20</button>  
        <button onClick={() => decreaseBy(20)}>decrease by 20</button>
  </div>

A useEffect hook (custom fetch hook)

This example shows how you can use useEffect inside a custom hook. Perhaps you would like to improve your fetch with something like this?
Or maybe if you add a ton of event handlers, write a custom hook for that!

const useFetch = (requestUrl: string) => {  
  // set your fetch data and error types instead of any  
  const [data, setData] = useState<any>(null);  
  const [error, setError] = useState<any>(null);  
  const [isLoading, setIsLoading] = useState<boolean>(true);  

  React.useEffect(() => {  
      const fetchData = async () => {  
      setIsLoading(true);  
      try {  
          const response = await fetch(`${requestUrl}`);  
          const json = await response.json();  
          setData(json);  
      } catch (err) {  
          setError(err);  
      }  
      setIsLoading(false);  
    }; 
  }, [requestUrl]);  

  return { data, error, isLoading };  
};

UseEffect custom hooks can be really viable and useful. Check out this useWhyDidYouUpdate hook, originally from Bruno Lemos.

Conclusion

As you can see from these small and compact examples, these hooks are plentifully useful. The best thing about them is that they are super reusable even throughout different projects.
If you create an awesome hook, you surely can use it in any further project! Isn't that amazing? On top of that, any hook desired, needed or thought of can be created. If you see a repeating pattern in your code which is using state or reacts to a certain event, try putting it in a custom hook.

Here are a couple of references to great hooks of what others have made:
• https://usehooks.com/
• https://github.com/rehooks/awesome-react-hooks

What are some of your custom hooks, how do you like them so far?
If you have anything to add, please tell me down in the comments :)

React Hooks cheat sheet

Juraj Pavlović — Mon, 02 Mar 2020 09:20:12 +0000

Not so long ago I started working with functional components instead of class based ones. The main goal was to learn how to implement React Hooks inside them. This way we can write less code and make it more reusable.

The benefits of using hooks and functional components are reusability, simpler & shorter code and the simplicity of testing those components.

The usual class approach of things is now a thing of the past. And here I will share short and understandable react hooks cheat sheet. This is not a tutorial for hooks as there are many articles online and the docs are really good. This serves as a quick reference for people already somewhat familiar with writing hooks. If you are new to hooks, you can still take a look. With that said, let's begin.

UseState - similar to React state and setState

with primitive value

const App = () => {
    const [carSpeed, updateCarSpeed] = useState(10);
    return (
        <div>
            <p>Car is going {carSpeed} km/h</p>
            <button onClick={() => updateCarSpeed(carSpeed + 5)}>
                Speed up
            </button>
        </div>
    );
};

with object

export const App = () => {
    const [carForm, updateForm] = useState({});
    const updateField = (e) => {
        updateForm({ ...carForm, [e.target.name]: e.target.value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(carForm);
    };
    return (
        <form onSubmit={handleSubmit}>
            <label>
                Car Owner:
                <input
                    value={carForm.owner}
                    name="owner"
                    onChange={updateField}
                />
            </label>
            <br />
            <label>
                Car model:
                <input
                    value={carForm.model}
                    name="model"
                    onChange={updateField}
                />
            </label>
            <button>Submit</button>
        </form>
    );
};

UseEffect - similar to componentDidUpdate

only triggers once (because of empty array param)

export const App = () => {
    const [carsData, updateCars] = useState({});

    useEffect(() => {
        fetch("http://example.com/cars.json")
            .then((resp) => resp.json())
            .then((data) => {
                updateCars(data);
            });
    }, []);

    const renderCars = () => {
        return carsData.cars.map((car) => {
            <p key={car.id}>{car.name}</p>;
        });
    };

    return <div>{renderCars()}</div>;
};

trigger on carName variable change

export const App = () => {
    const [carName, updateCarName] = useState("");

    useEffect(() => {
        console.log("changed");
    }, [carName]);

    return (
        <div>
            <input
                value={carName}
                onChange={(e) => updateCarName(e.target.value)}
            />
        </div>
    );
};

UseReducer with React.memo HOC and useCallback

This example makes use of useReducer hook which acts similar to Redux. It has a reducer and actions that change the state in the reducer. We also make use of the React.memo and useCallback for the sole reason of not re-rendering new "Car" components when each car is checked that it is sold.
UseCallback - this hook is used when you have a component with a frequently re-rendering child and to which you pass a callback to. Without it the addCar function would be re-instantiated each time a new car is added to the list.


// initial cars state
const initialState = [
  {
    id: id(),
    name: "Audi A4",
    description: 'Black tint with red wheels, 100kw',
    sold: false
  },
  {
    id: id(),
    name: "Porsche 911",
    description: 'Cherry red tint with dark golden wheels, 300kw',
    sold: false
  },
  {
    id: id(),
    name: "Lamborghini Gallardo",
    description: 'Lamborghini green with black wheels, 500kw',
    sold: false
  },
];


// action names
const CAR_ADD = 'CAR_ADD';
const CAR_SELL = 'CAR_SELL';

// the reducer
const reducer = (state, action) => {
  if (action.type === CAR_ADD) {
    return [action.payload, ...state];
  }

  if (action.type === CAR_SELL) {
    return state.map(car => {
      if (car.id !== action.payload.id) {
        return car;
      }
      return { ...car, sold: !car.sold };
    });
  }

  return state;
};

const App = () => {
  const [cars, dispatch] = useReducer(reducer, initialState);

  const addCar = useCallback(({ name, description }) => {
    dispatch(
      {
        type: CAR_ADD,
        payload: {
          name,
          description,
          sold: false,
          id: id()
        }
      },
      [dispatch]
    );
  });

  const toggleSold = useCallback(
    id => {
      dispatch({
        type: CAR_SELL,
        payload: {
          id
        }
      });
    },
    [dispatch]
  );

  return (
    <div style={{ maxWidth: 400, margin: '0 auto' }}>
      <NewCarForm onSubmit={addCar} />
      <Cars cars={cars} onSell={toggleSold} />
    </div>
  );
};

const Cars = ({ cars = [], onSell }) => {
  return (
    <div>
      <h2>Cars ({cars.length})</h2>
      {cars.map(car => (
        <Car key={car.id} car={car} onSell={onSell} />
      ))}
    </div>
  );
};

const Car = React.memo(({ car, onSell }) => {
  return (
    <div style={{border:"1px solid", margin: 10, padding: 10}}>
      <h3>{car.name}</h3>
      <p>{car.description}</p>
      <div>
        <label>
          <input
            type="checkbox"
            checked={car.sold}
            onChange={() => onSell(car.id)}
          />
          Sold
        </label>
      </div>
    </div>
  );
});

const NewCarForm = React.memo(({ onSubmit }) => {
  const [name, setCarName] = useState('');
  const [description, setCarDescription] = useState('');

  const handleChange = e => {
    e.preventDefault();
    onSubmit({ name, description });
  };

  return (
    <form onSubmit={handleChange}>
      <input
        placeholder="Car name"
        type="text"
        value={name}
        onChange={event => setCarName(event.target.value)}
      />
      <input
        placeholder="Car description"
        type="text"
        value={description}
        onChange={event => setCarDescription(event.target.value)}
      />
      <input type="submit" />
    </form>
  );
});

That would be all, thank you for reading kind stranger. Do you have something of your own to add to the list? Let me know.