DEV Community: Stéphane Sulikowski

The Benefits of Pure Functions in JavaScript

Stéphane Sulikowski — Thu, 03 Feb 2022 20:22:29 +0000

What are pure functions ? In short, pure functions are functions that don’t modify the global state and don’t depend on any external input. They always return the same result when given the same input. This makes them predictable and reliable. In this blog post, we will discuss the benefits of using pure functions in JavaScript, and show you how to write your own!

Benefits

One of the biggest benefits of using pure functions is that they are predictable and reliable. When you call a pure function, you can be sure that it will always return the same result, given the same input. This makes them perfect for use in libraries or frameworks, where you need to be able to count on their behavior. Pure functions are also easy to debug, since any errors will be caused by the function itself, and not by some external input.

Another benefit of pure functions is that they are lightweight. They don’t require any special libraries or frameworks, and they can be executed in any environment. This makes them a great choice for small scripts or prototypes.

Pure functions also have some performance benefits. Because they don’t modify the global state, they are faster than regular functions. They also use less memory, which is important for applications with large data sets.
Finally, pure functions are simple and easy to understand. You don’t need to know anything about the internals of a function to use it correctly. This makes them ideal for beginners who are just learning JavaScript.

So, how can you write pure functions?

It’s very easy! Just follow these simple steps:
First, create a function that takes one input and returns a result.
Next, make sure the function doesn’t modify the global state or depend on any external input.
Finally, test the function to make sure it returns the same result every time.
Here’s an example of a pure function in action:

// return the sum of 2 numbers

const getSum = (a, b) => {
  return a + b;
};

console.log(getSum(1, 2)); // returns 3

And on the other hand, here is an example of an impure function:

// return the sum of 2 numbers and add a parameter value

const addParameter = 3;

const getSumPlusParameter = (a, b) => {
  return a + b + addParameter;
};

console.log(getSumPlusParameter(1, 2)); // returns 6 and depends of an external parameter

When to use pure functions?

When you need a function to always return the same result, given the same input. Pure functions are perfect for this purpose.

When you’re writing a library or framework that will be used by other developers. Pure functions are the best way to ensure predictable and reliable behavior.
When you’re learning JavaScript. Pure functions are simple and easy to understand, making them ideal for beginners.

And … when to use impure functions?

When you need to call a function with side effects (such as modifying global state or accessing external resources)
When the function is too complex to be written as a pure function

When performance is more important than reliability or readability.

Impure functions can be a bit more tricky to debug than pure functions, but they often have better performance. If you need to call a function with side effects, or if the function is too complex to be written as a pure function, then it’s best to use an impure function. Just make sure you test it thoroughly and be aware of any potential problems!

Conclusion

When in doubt, use a pure function. Pure functions are easier to read and maintain, and they always return the same result.

Use impure functions when you need to call a function with side effects, or when the function is too complex to be written as a pure function. Be aware of any potential problems that may arise.

As you can see, using pure functions in JavaScript is a great way to improve reliability and performance while keeping things simple and easy to understand. So, next time you’re writing a script or prototype, be sure to use pure functions! They’ll make your code easier to read and maintain.

What can you do to help me?

Please don’t hesitate to:

Like the article
Follow me
Leave a comment and express your opinion.

Happy coding! :)

Why am I using Divi for WordPress ?

Stéphane Sulikowski — Wed, 02 Feb 2022 10:19:14 +0000

If you’re looking for an easy-to-use, fast, and beautiful WordPress theme, look no further than Divi. Created by the team at Elegant Themes, Divi is the perfect theme for anyone looking to create a stunning website without any coding required. In this blog post, we’ll take a look at the top benefits of using Divi for WordPress.

Installation

Divi is super easy to install. Simply download and activate the theme, and you’re ready to go. No coding is required!

Visual builder

The Divi visual builder is one of the theme’s standout features. With it, you can create beautiful designs with just a few clicks. Plus, you can see your changes in real-time, so there’s no need to wait for pages to reload.

Animations and effects

Divi comes with many built-in animations and effects that you can use to make your website stand out. With Divi, you can create beautiful pages without having to rely on plugins or additional software.

Theme builder

Divi’s theme builder gives you complete control over your website’s design. With it, you can easily create custom header designs, footers, and more. You can also choose from a variety of different layouts and modules to create the perfect look for your website.
The theme builder also allows you to export and import themes in a very easy way.

Designs library

The Divi designs library is packed with beautiful templates to get you started. Plus, you can easily create your custom templates and save them for future use.

Faster page load times

Divi is also known for its fast page load times. This is thanks to the built-in caching system, which stores your pages and posts in a temporary storage area so they can be loaded quickly and easily.
Fast development
Divi is also one of the fastest WordPress themes around. This means that you can create beautiful websites in no time at all.

Customization

If needed, you can add your CSS classes to fine-tune your design with the advanced tools
Export/import
The Divi theme also includes an export/import feature, which makes it easy to move your website from one server to another.

Stability

Divi is also a very stable WordPress theme. It has been tested on thousands of websites and has never caused any problems.

Updates

Divi is regularly updated with new features and enhancements, so you can be sure that your website will always be up-to-date.

Pricing

Unlike some other WordPress themes, Divi is affordable and costs just $89 for access to all of its features. This makes it a great option for small businesses, bloggers, and anyone else who wants to create a professional website without spending a lot of money.

Conclusion

As you can see, the Divi theme offers a ton of features and benefits that make it the perfect choice for WordPress users of all levels of experience. And there would be a lot more to say about it! It saved me a ton of time during my blog development and I was astonished by the endless possibilities.

What can you do to help me?

Please don’t hesitate to:

Like the article
Follow me
Leave a comment and express your opinion.

Happy no-coding!

How to set up routing in an Express.js project using TypeScript

Stéphane Sulikowski — Wed, 26 Jan 2022 08:12:49 +0000

This tutorial will go through the steps to set up routing with express.js and some best practices.
This post follows the setup of the Express.js backend system described here: How to set up a Node.js backend using Express.js and TypeScript

What is routing?

A route is a system that associates an HTTP request and a function that will execute a process. There can be some parameters to handle, and the function can provide an answer to send back to the process requesting the route.
How to create a simple route?

In the index.tx file located in the src folder, we will add our first route :

app.get('/', (req, res) => {
    res.send("What's up doc ?!");
});

This code means :
the URL that will request the root route with a GET method will trigger a function that will send the message “What’s up doc ?!”

Insert this code in the index.ts file :

import express from 'express';
import dotenv from 'dotenv';

const app = express();
dotenv.config();

// routes
app.get('/', (req, res) => {
  res.send("What's up doc ?!");
});

// start the server
app.listen(process.env.BACK_PORT, () => {
  console.log(
    `server running : http://${process.env.BACK_HOST}:${process.env.BACK_PORT}`
  );
});

and run the server with the terminal command

npm run start

Then with a web browser, enter the URL of the server. In my case : http://localhost:8080

So now the root route “/” returns the message “What’s up doc ?!”

Manage routing in separate files

We could handle all the routes in the main index.ts file and list all of them with the functions and processes, but splitting them into several files will help us have a more maintainable code.
So in the src folder, let’s create a routes folder and a defaultRoute.ts file inside it.
We will now declare the root route in defaultRoute.ts like this:

import { Router } from 'express';

export const defaultRoute = Router();

defaultRoute.get('/', (req, res) => {
  res.send("What's up doc ?!");
});

This code looks very similar to the one we wrote in the index.ts

Now, inside the routes filter, create an index.ts file that will gather all routes from the different files:
import express from 'express';
import { defaultRoute } from './defaultRoute';

export const routes = express.Router();

routes.use(defaultRoute);
And finally, let’s update the src/index.ts to use these routes :

import express from 'express';
import dotenv from 'dotenv';
import { routes } from './routes';

const app = express();
dotenv.config();

// routes
app.use('/', routes);

// start the server
app.listen(process.env.BACK_PORT, () => {
  console.log(
    `server running : http://${process.env.BACK_HOST}:${process.env.BACK_PORT}`
  );
});

Stop and run the server again to see that you have the same result as before.

From here we can start building our routes.

Route with process

Let’s do something more funny: we will create a route that takes 2 numbers as parameters and return the sum.
As we will expect some data, we will use the POST method and listen for the route /calc.
First, in src/routes, we will create a calcRoute.ts with a new route listening for a post method on the /calc URL:
import express, { Request, Response } from 'express';

export const calcRoute = express.Router();

calcRoute.post('/calc', (req: Request, res: Response) => {

});

And now we add the process:
check if both the parameters exist in the request body
return the sum in a json format
return an error in a json format if a parameter is missing or is not a number

import express, { Request, Response } from 'express';

export const calcRoute = express.Router();

calcRoute.post('/calc', (req: Request, res: Response): void => {
  const { a, b } = req.body;

  if (a && b && typeof a === 'number' && typeof b === 'number') {
    res.json({
      success: true,
      message: a + b,
    });
  } else {
    res.json({
      success: false,
      message: 'Missing parameters',
    });
  }
});

To get this route properly working we need to:

add it to the routes/index.ts -install body-parser to get the parameters from the request

Adding the route

In the src/routes/index.ts we will add the new route:

import express from 'express';
import { calcRoute } from './calcRoute';
import { defaultRoute } from './defaultRoute';

export const routes = express.Router();

routes.use(defaultRoute);
routes.use(calcRoute);

Installing and setup body-parser

In the terminal, let’s install the library

npm install body-parser --save

In the src/index.ts we will set it up:

import express from 'express';
import { Application } from 'express';
import dotenv from 'dotenv';
import { routes } from './routes';
import bodyParser from 'body-parser';

const app: Application = express();

// body-parser
app.use(bodyParser.json({ limit: '50mb', type: 'application/json' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
dotenv.config();

// routes
app.use('/', routes);

// start the server
app.listen(process.env.BACK_PORT, () => {
  console.log(
    `server running : http://${process.env.BACK_HOST}:${process.env.BACK_PORT}`
  );
});

Test the route

To test this route we will need a software like postman to send the request with the parameters in the body after restarting the server:

Conclusion

We looked at how to route and handle them in distinct files in this brief example. There’s still much more to say about routes, particularly when it comes to more complicated use cases and the use of middlewares to manage processes.

After reading this document, I hope you will have a clear understanding of the basics of express.js’s routing system.

What can you do to help me?

Please don’t hesitate to:

Like the article
Follow me
Leave a comment and express your opinion.

Happy coding!

Why I use VSCode as an IDE

Stéphane Sulikowski — Tue, 25 Jan 2022 17:39:34 +0000

I have been a VSCode user for some time now and I am very happy with the decision. The benefits that VSCode has to offer are so many it is hard to list them all in one post, but here are just a few of the reasons why VSCode is my IDE of choice.

VSCode is my go-to IDE because it offers a great user experience, cross platform support, and tons of integrations. VSCode has quickly become one of the most popular IDEs out there, and for good reason!

Here are some more reasons why VSCode is a great choice for me:

It runs on Windows, MacOS, Linux … and recently in a web browser
Its cross platform capabilities allow me to work seamlessly from anywhere
VSCode comes with built in Git integration which saves me loads of time
VSCode’s interface feels natural and easy to navigate
VSCode comes with built in debugging capabilities which helps me find errors quickly
The code completion feature makes writing code easier and faster
The extension marketplace provides access to thousands of extensions that can help with anything from syntax highlighting to project management

There are so many benefits to using VSCode as my main IDE — I could go on forever! If you’re looking for an IDE that is fast, reliable and easy to use, VSCode is definitely a great option. Give it a try today!

Happy coding!

8 Reasons to consider TypeScript for your next web development project

Stéphane Sulikowski — Mon, 24 Jan 2022 09:32:53 +0000

If you’re looking for a more structured and sophisticated web development project language, TypeScript might be the right choice for you. Here are 8 reasons why you should consider using it for your next project:

1. It can make code much more readable and organized.
TypeScript can help to clarify your code and make it more readable. It also helps to enforce a certain level of organization, which is especially helpful if you’re working on a large project with multiple developers.
This makes the code easier to read and understand and can also help avoid potential coding conflicts down the road.

2. It has strong typing, which helps to avoid errors.
TypeScript has strong typing, which can help to catch errors in your code before it’s ever compiled. This not only saves you time and hassle, but it can also help to avoid potential runtime errors.
Strong typing is critical when working with large projects or teams, as it can help ensure that everyone is on the same page and that there are no surprises when it comes to the codebase.
TypeScript also offers optional typing, which gives you more flexibility while still helping to catch errors.

3. It offers object-oriented programming features.
TypeScript offers object-oriented programming features, which can help to make your code more organized and efficient. This is especially helpful if you’re working on a complex project with multiple objects and classes.
Object-oriented programming can also help to make your code more reusable and easier to maintain over time.

4. Its typing files help keep everyone on the same page.
TypeScript typings files are a great way to keep everyone on the same page regarding coding standards. These typing files can be used to define all of the typings for a project, making it easier for other developers to understand and work with your code.
This is especially helpful if you’re working with a large team or sharing your code with others. The typings files can also be used to generate type definitions for third-party libraries, making it easier to use those libraries in your project.

5. You can use it with JavaScript frameworks like React, AngularJS or Svelte.
TypeScript can be used with popular JavaScript frameworks like React, AngularJS and Svelte. This makes it an excellent choice for development projects that use these frameworks, as you can take advantage of the typings files and all of the other benefits that TypeScript offers.
TypeScript also offers support for ES2015, which means that you can use the latest features of JavaScript with these frameworks.
TypeScript is also being used more and more in mobile development, thanks to its support for React Native.

6. It offers excellent compilation error messages.
TypeScript offers great compilation error messages, which can help you to find and fix any errors in your code quickly. This is especially helpful when you’re first starting to use TypeScript or if you’re working with a large codebase.
Great compilation error messages are essential for any development tool, and TypeScript delivers in this area.

7. You can use it to create reusable components.
TypeScript can be used to create reusable components, which is a great way to improve the organization and efficiency of your code. This is especially helpful if you’re working on a complex project with multiple objects and classes.
Reusable components can also help to make your code more maintainable over time.

8. It’s constantly being improved by the TypeScript team.
TypeScript is constantly being improved by the TypeScript team, which means that you can always rely on it to be up-to-date and compliant with the latest standards. This is an excellent benefit for any development tool, as you can always count on it to work correctly and without any surprises.
The TypeScript team is also constantly working to improve the usability and features of TypeScript. So far, they’ve done a great job in this area, and TypeScript is only getting better with time.

Conclusion

Hopefully, this gives you a good overview of why TypeScript might be a good choice for your next development project! If you’re interested in learning more, I encourage you to check out the official TypeScript website. Thanks for reading and …

Happy coding!

How to setup a Svelte with Typescript project

Stéphane Sulikowski — Thu, 20 Jan 2022 08:07:00 +0000

TypeScript is a superset of JavaScript that provides optional static typing, classes, and modules. Static types allow TypeScript to provide more accurate type checking and tooling support. Classes and modules enable better organization of your code.

TypeScript can be used with any existing JavaScript codebase. It transpiles down to plain old JavaScript so there’s no need to change your existing codebases.

In this post, we’ll walk through how to set up a Svelte project with Typescript. We’ll start by creating a new project, then, we’ll add Typescript support and configure our project to use it.

Svelte and TypeScript

Svelte is a new compiler that takes your JavaScript and turns it into efficient, production-ready code. Because Svelte watches the types of your variables and inserts the appropriate checks and optimizations, you don’t have to worry about performance problems or browser compatibility issues.
TypeScript can be used with Svelte to provide type checking and tooling support. This can help you catch errors early in the development process, and ensure that your code is as efficient as possible.

Creating a New Project

The first thing we need to do is create a new Svelte project. We can do this using the degit command

npx degit sveltejs/template testApp

This will install all the svelte project template.

Setting up TypeScript

Let’s get started by changing the src/app.svelte file with a code editor in our project.
We will set the use of TypeScript language by changing
<script>
in
<script lang="ts">

Now we will run the setupTypeScript.js file to start using TypeScript in our application by typing in the terminal:

node scripts/setupTypeScript.js

Reinstall all dependencies with the terminal command:
npm install
And we are ready to go!

Start the server

We will use the terminal command
npm run dev
and the server will be accessible from our browser at the specified url.

Conclusion

Svelte and typescript are a powerful combination for developing web applications. Svelte provides a way to create efficient, production-ready code, while typescript provides type checking and tooling support. Together, they allow you to catch errors early in the development process, and ensure that your code is as efficient as possible.
I hope you found this post helpful! If you have any questions or feedback, please feel free to leave a comment below. Thanks!

Happy coding!

How to set up a Node.js backend using Express.js and TypeScript

Stéphane Sulikowski — Tue, 18 Jan 2022 09:57:35 +0000

Node.js is one of the most popular node frameworks for web developers today, and when combined with Express.js, it can be even more powerful.

Express is a node framework that lets you build node apps in an easy way by using node’s built-in middleware concept. This has many benefits like making your code more readable and maintainable, abstracting away boilerplate patterns like route handlers to make them reusable, etc.

TypeScript is a superset of JavaScript that compiles to clean JavaScript output without any runtime errors or performance issues! It has many great features like static typing, modules, interfaces, and more.

In this blog post, we’ll see how to set up a node.js backend using Express.js and TypeScript.

Installation

If Node.js is not installed on your computer, download the proper installation package on [https://nodejs.org] and proceed to the installation.

Then, we need to install the Express.js and TypeScript dependencies. For this, we can use npm:
npm install express typescript --save-dev
The —dev option will write the dependency as used for the development only. It will not be installed in a production environment.

Create a new directory to store your project, and navigate inside with your terminal and initialise the project with :

npm init -y

Install types

It’s recommended to install the types so TypeScript can use type declarations :
npm install @types/node @types/express --save-dev

Setup TypeScript with tsconfig.json

Create a file named tsconfig.json that is the configuration file for TypeScript, and write the following options :

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}

Please note that all the code has to be placed in a folder named « src » to be processed.

Add scripts to the package.json file

We will add the following scripts to the package.json file to process and compile the Typescript code at start :

  "scripts": {
    "prebuild": "tslint -c tslint.json -p tsconfig.json --fix",
    "build": "tsc",
    "prestart": "npm run build",
    "start": "node ."
  },

Add the main entry in the package.json file

We will now tell node that the main entry point for our app is located in the dist/index.js file:
"main": "dist/index.js",

Add a linter

We will add now a linter to ensure code quality. It’s super handy because the linter check things beyond code syntax.
Again let’s use a command in the terminal :
npm install --save-dev tslint

We will also create a configuration file and write the following options :

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "trailing-comma": [ false ],
        "no-console": [true, "warning"]
    },
    "rulesDirectory": []
}

Please note that we have an option that prevents usage of the console, but with a warning only and will not block the output if we decide to use it anyway.

… and configuration is done !

Create a server

Now we can create an express app using node's App module.
As we use TypeScript, please be aware that the includes are written in a different way :

Insead of
const express = require('express');

We will write
import express from 'express';

As we declared in the configuration, the main file is index.ts that is located in the « src » directory.
We create the directory and file if needed and we write the following code:

import express from 'express';

const app = express();

// declare a route with a response
app.get('/', (req, res) => {
  res.send("What's up doc ?!");
});

// start the server
app.listen(8081, () => {
  console.log(`server running : http://localhost:8081`);
});

Now time to run the server, in the root directory of the project we will write:
npm run start
The code will be compiled, and when the process is finishes we should see «server running : http://localhost:8081 ».

Now we can type http://localhost:8081 in our browser, and … 🥳

One more thing

As you could see we wrote the server host and port in the code.
To get more code friendly, we should write these infos as environment variables.
To do so let’s add a npm package named dotenv:
npm install dotenv --save

We will create a file at the root of our project named .env
In this file let’s add the following information:

BACK_HOST=localhost
BACK_PORT=8081

And in our index.ts file, let’s call these variables and use them for our server:

import express from 'express';
import dotenv from 'dotenv';

const app = express();
dotenv.config(); 


// declare a route with a response
app.get('/', (req, res) => {
  res.send("What's up doc ?!");
});

// start the server
app.listen(process.env.BACK_PORT, () => {
  console.log(`server running : http://${process.env.BACK_HOST}:${process.env.BACK_PORT}`);
});

Please note that to access an env variable, follow the syntax:
process.env.NAME_OF_YOUR_VARIABLE_DECLARED_IN_THE_ENV_FILE

Conclusion

In this post, we've seen how to set up a node.js backend using Express.js and TypeScript. We've also seen some of the benefits that come with using these technologies together.
I hope you found this useful!

Happy coding !

How to improve the use of the console in javascript

Stéphane Sulikowski — Thu, 09 Dec 2021 17:51:52 +0000

When we develop, and not only in javascript, it is regularly necessary to read the information contained in a variable or the execution result.

In javascript, we have the Console object, which allows us to ask the program to write a message or a result during its execution.

The most commonly used method, and one that I have used countless times, is the console.log() function, but there are other functions at our disposal that allow us to simplify the reading depending on the case.

first thing first : console.log()

As mentioned above, this function is widely used and is usually one of the first functions learned in javascript.
You have to pass the message or the variable in the function to see the result:

console.log("Hello");
// Will display : Hello

It is possible to concatenate a message and the content of a variable:

const myVariable = "world";
console.log("Hello " + myVariable);
// Will display : Hello world

Or to write a title and display the content of a variable:

const myVariable = "Hello";
console.log("My message :", myVariable);
// Will display : My message : Hello

great tables : console.table()

This efficient function will display the information contained in an array variable by formatting the result.
Let's use an example to illustrate how it works:

const myTable = [1, 2, 3, 4, 5]
console.table(myTable);
// Will display :
┌─────────┬────────┐
│ (index) │ Values │
├─────────┼────────┤
│    0    │   1    │
│    1    │   2    │
│    2    │   3    │
│    3    │   4    │
└─────────┴────────┘

A neat and readable table is displayed, much more practical than :

console.log(myTable);
// Will display : [1, 2, 3, 4]

And the magic happens if we display the content of an array of objects:

const myTable = [
    {
        nom: "name 1",
        prenom: "firstname 1",
        age: 20 
    },
    {
        nom: "name 2",
        prenom: "firstname 2",
        age: 30 
    },
    {
        nom: "name 3",
        prenom: "firstname 3",
        age: 40 
    },
];
console.table(myTable);

// Will display :
┌─────────┬──────────┬────────────────────┬─────┐
│ (index) │   name   │     firstname      │ age │
├─────────┼──────────┼────────────────────┼─────┤
│    0    │ 'name 1' │   'firstname 1'    │ 20  │
│    1    │ 'name 2' │   'firstname 2'    │ 30  │
│    2    │ 'name 3' │   'firstname 3'    │ 40  │
└─────────┴──────────┴────────────────────┴─────┘

Unfortunately, if you use values containing objects, the table will no longer be structured accordingly but display the data more rawly.
But this first level is already convenient!

grouping infos : console.group()

When it comes to organizing info displayed in the console, console.group() allow indenting output messages.
It’s, of course, possible to have multiple indentation levels by nesting a group into a group.

Again let’s take an example to show how it works :

const myArray = [1, 2, 3];

console.group();
    console.log(myArray[0]);
    console.group();
        console.log(myArray[1]);
        console.group();
            console.log(myArray[2]);
        console.groupEnd();
    console.groupEnd();
console.groupEnd();

This code displays :

This indentation allows you to get more readable outputs for debugging or any other needs.

Please note that you have to close the group with console.groupEnd();

Conclusion

The console objets offers several methods to optimize the outputs you need. You can check all the other possibilities : [https://developer.mozilla.org/en/docs/Web/API/Console]

Happy coding !

Article also available on Medium

How to create a custom React hook to fetch an API (using TypeScript)?

Stéphane Sulikowski — Thu, 09 Dec 2021 17:45:58 +0000

How to create a custom React hook to fetch an API (using TypeScript)?

Hooks are convenient for modern react development. The react framework comes with standard hooks to manage state, for example, with useState, and here we will write our hook to fetch data from any API.

Buț first …

… what is a hook?

A hook is a javascript or typescript function that can include other hooks. Its name starts with « use », and this function can only be called inside a React functional component.

You can find the complete Rules of Hooks documentation here.

Let’s start

First, create a new React project using Typescript.
In the terminal, navigate to the desired folder, and with the terminal command :
npx create-react-app apihook --template typescript

The project is ready, time to think about the output of our hook to set the goal.

The output

Our hook will fetch an API, and the function will return a result.
For this example, we want to get the following information:

response status code: to test the response code
response status text: to get the response status in a more readable way
data: data provided by the API
error: description of the error if one occurs
loading: to know if the process is running

We will write a type to set that!

Coding!

I will create a new folder to store my hook and a new file named useApiHook.ts

And set my type as following :



export type TApiResponse = {
  status: Number;
  statusText: String;
  data: any;
  error: any;
  loading: Boolean;
};

We will now declare my hook as a function that will take a string containing the url as parameter and return a TApiResponse :



export type TApiResponse = {
  status: Number;
  statusText: String;
  data: any;
  error: any;
  loading: Boolean;
};

export const useApiGet = (url: string): TApiResponse => {};

We will also use the state to store the information before returning the response. For this purpose, we will use a standard hook named useState, and import this function from the React framework :



import { useState } from 'react';

export type TApiResponse = {
  status: Number;
  statusText: String;
  data: any;
  error: any;
  loading: Boolean;
};

export const useApiGet = (url: string): TApiResponse => {
  const [status, setStatus] = useState<Number>(0);
  const [statusText, setStatusText] = useState<String>('');
  const [data, setData] = useState<any>();
  const [error, setError] = useState<any>();
  const [loading, setLoading] = useState<boolean>(false);
};

Please note that we initialize status and textStatus to avoid « undefined ». If not, we would get a TypeScript error telling that it doesn’t match the type we defined (the power of TypeScript !).

Time to get the data!
Here we will use an async function to create a promise and get the data. We will also use try/catch to catch an error if something wrong happens.
We also set isLoading to ‘true’, so the process will be set as running :



import { useState } from 'react';

export type TApiResponse = {
  status: Number;
  statusText: String;
  data: any;
  error: any;
  loading: Boolean;
};

export const useApiGet = (url: string): TApiResponse => {
  const [status, setStatus] = useState<Number>(0);
  const [statusText, setStatusText] = useState<String>('');
  const [data, setData] = useState<any>();
  const [error, setError] = useState<any>();
  const [loading, setLoading] = useState<boolean>(false);

  const getAPIData = async () => {
    setLoading(true);
    try {
      const apiResponse = await fetch(url);
      const json = await apiResponse.json();
    } catch (error) {
    }
  };
};

We are almost done !
Now let’s store the results in the different states, and at the end, set isLoading to false to declare that the process is finished:



import { useState } from 'react';

export type TApiResponse = {
  status: Number;
  statusText: String;
  data: any;
  error: any;
  loading: Boolean;
};

export const useApiGet = (url: string): TApiResponse => {
  const [status, setStatus] = useState<Number>(0);
  const [statusText, setStatusText] = useState<String>('');
  const [data, setData] = useState<any>();
  const [error, setError] = useState<any>();
  const [loading, setLoading] = useState<boolean>(false);

  const getAPIData = async () => {
    setLoading(true);
    try {
      const apiResponse = await fetch(url);
      const json = await apiResponse.json();
      setStatus(apiResponse.status);
      setStatusText(apiResponse.statusText);
      setData(json);
    } catch (error) {
      setError(error);
    }
    setLoading(false);
  };
};

To finish our custom hook, we need to trigger the function we have crated. To do so, we use another standard hook : useEffect().
This hook will execute code when the component loads or some variable has changed.
We will only use it when the component is loaded for our purpose.
We need first to import it and use it to call our function :



import { useState, useEffect } from 'react';

export type TApiResponse = {
  status: Number;
  statusText: String;
  data: any;
  error: any;
  loading: Boolean;
};

export const useApiGet = (url: string): TApiResponse => {
  const [status, setStatus] = useState<Number>(0);
  const [statusText, setStatusText] = useState<String>('');
  const [data, setData] = useState<any>();
  const [error, setError] = useState<any>();
  const [loading, setLoading] = useState<boolean>(false);

  const getAPIData = async () => {
    setLoading(true);
    try {
      const apiResponse = await fetch(url);
      const json = await apiResponse.json();
      setStatus(apiResponse.status);
      setStatusText(apiResponse.statusText);
      setData(json);
    } catch (error) {
      setError(error);
    }
    setLoading(false);
  };

  useEffect(() => {
    getAPIData();
  }, []);

  return { status, statusText, data, error, loading };
};

Now that our hook is done let’s call it in the main application.

Use the custom hook

In our example, we will call the hook to fetch a movie database API and console.log the result.
We need to create an account on omdbapi.com to get a free API key required to pull the data.

In the file App.tsx, we will :

import the type and the custom hook
add the call to the API and store the result in a variable called data

Then to display the result, I will use the property loadingfrom the response to avoid multiple print during the process:



import React from 'react';

import logo from './logo.svg';

import './App.css';

import { useApiGet, TApiResponse } from './hooks/useApiHook';

function App() {

// call to the hook

  const data: TApiResponse = useApiGet(

    'http://www.omdbapi.com/?s=Guardians&amp;apikey=xxxxxxxx'

  );

// print the output

  if (!data.loading) console.log(data);

return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.tsx</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer">

          Learn React

        </a>

      </header>

    </div>

  );

}

export default App;

Run the app

Finally let’s run the app by typing in the console :
npm start

And …

🥳

Conclusion

Hooks can be super handy and allow the creation of reusable functions. They have to follow some rules to build them and are very flexible.
For our example, we could go further and extend the function to handle parameters, other methods, some checks and controls, but I wanted to keep it simple to explain the principle.

Now I invite you to create custom hooks for your react apps, and feel free to share some usages in the comments.

Happy coding!

Article also available on Medium