DEV Community: Ola' John Ajiboye

How to build an interactive CLI tool with NodeJS

Ola' John Ajiboye — Mon, 28 Oct 2019 21:51:20 +0000

Command-Line Interfaces(CLI) are great tools for automating repetitive tasks or allowing your computer to take care of the boring stuffs.

Node.js is an interesting choice for building CLIs as you can leverage its vast ecosystem. And thanks to package managers like npm and yarn, these can be easily distributed and consumed across multiple platforms. In this post, we'll look at why you might want to write a CLI, and how to use Node.js for it.

The CLI tool we'll be building will be called Prtfy. This will simply set up a Prettifier in javascript directory. It will write the Prettier Config and prompts the user for their configuration settings.

Let's get started.

We'll familiarize ourself with the npm modules that will make coding process more simplified.

chalk - Terminal Styling, i.e colors etc.
figlet - For making large letters out of ordinary text.
inquirer - Collects user inputs from the command line.
shelljs - Portable Unix shell commands for Node.js

Let's jump to the code.

First, we need to setup a Node project. Go to the command line. and type


mkdir prtfy
cd prtfy
npm init

Follow all the prompts to get the project going. You could also skip all the prompts by simply usingnpm init -y instead of npm init. By now you should have a basic Node project with the package.json file.

Next, we'll install all the core depedencies listed above. Type the below for this.


npm install chalk figlet inquirer shelljs

index.js file

Now create an index.js file and import the installed modules.


const inquirer = require("inquirer");
const chalk = require("chalk");
const figlet = require("figlet");
const shell = require("shelljs");

Let's plan the CLI

It does a couple of things.

Asks user their preffered prettier config.
Install the prettier locally.
Writes the config file.
Configures a pre-commit hook.

With this in mind, let's wrote a pseudo-code for the this.index.js


const run = async () => {
  // show prtfy introduction
  // install GitHook
  // ask questions
  // create the files
  // configures pre-commit hook
  // show success message
};

run();

For ease, we'll have a default configuration. For additional challenge, you can ask all this from the user. Our default config will be stored in a variable.


prettierConfig = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: false,
    singleQuote: true,
    useTabs: false,
    printWidth: 100,
    bracketSpacing: true,
    jsxBracketSameLine: false,
    arrowParens: "avoid",
}

Let's create these tasks one after the other.


// initializes and displays the welcome screen
const init = async () => {
    clear()
    console.log(
        chalk.green(
            figlet.textSync('PrTfY', {
                horizontalLayout: 'full',
            })
        )
    )
}

You will notice we have a clear() function. This clears the console of any clutter when we run prtfy. We need to install the clear module. Run


npm install clear

Let's configure Git hook more info an what that means here


const installGitHook = async () => {
    const spinner = new Spinner('Configuring Git Hook..')
    return installHelper(
        'npx mrm lint-staged',
        () => console.log(chalk.green('Git hook configured 👍')),
        spinner
    )
}

Next, we need to prompt user for some answers.


const askIfJsorTs= () => {
    const questions = [
        {
            name: 'ENV',
            type: 'list',
            choices: ['.Typescript', '.Javascript'],
            message: 'Please, select if this is a JavaScript or Typescript project',
            filter: function (val) {
                return (val === '.Typescript') ? 'ts' : 'js'
            },
        },
    ]
    return inquirer.prompt(questions)
}

What askIfJsorTs() does basically is to ask if the user wants to setup prettier for Javascript or Typescript. The filter then returns 'ts' or 'js' based on the selection.

Next, we'll setup the configuration files based on user input. But, to make things more snazzy and realistic. We'll add a spinner to indicate when an asynchronous process like installing prettier or writing files is ongoing and when it's done. Something like below

This is probably the trickiest part as we need to handle some async logic elegantly. We'll start by installing the spinner. Run


npm install clui

Also, don't forget to add the spinner to your list of imports. Like so


const clui = require('clui')
const Spinner = clui.Spinner

Now, we write the async logic to help us out with this. We need to await the child process installing the prettier and other modules before writing the config files. You can check the clui docs for more info

const installHelper = (command, onSuccess, spinner) => {
    return new Promise((resolve, reject) => {
        var process = spawn(command, { shell: true })
        spinner.start()
        process.on('exit', () => {
            spinner.stop()
            onSuccess()
            resolve()
        })
    })
}

Install prettier

const installPrettier = async () => {
    const spinner = new Spinner('Installing Prettier...')
    return installHelper(
        'yarn add -D prettier',
        () => console.log(chalk.green('Prettier has been installed! 👍')),
        spinner
    )
}

Finally, putting everything toeghter we write a prettier file based on all the information we have.

#!/usr/bin / env node
const cli = require('clui')
const shell = require('shelljs')
const Spinner = cli.Spinner
const clear = require('clear')
const spawn = require('child_process').spawn
const chalk = require('chalk')
const inquirer = require('inquirer')
const figlet = require('figlet')
const config = require('./config')

// initializes and displays the welcome screen
const init = async () => {
    clear()
    console.log(
        chalk.green(
            figlet.textSync('PrTfY', {
                horizontalLayout: 'full',
            })
        )
    )
}

const installHelper = (command, onSuccess, spinner) => {
    return new Promise((resolve, reject) => {
        var process = spawn(command, { shell: true })
        spinner.start()
        process.on('exit', () => {
            spinner.stop()
            onSuccess()
            resolve()
        })
    })
}

const installPrettier = async () => {
    const spinner = new Spinner('Installing Prettier...')
    return installHelper(
        'yarn add -D prettier',
        () => console.log(chalk.green('Prettier has been installed! 👍')),
        spinner
    )
}

const installGitHook = async () => {
    const spinner = new Spinner('Configuring Git Hook..')
    return installHelper(
        'npx mrm lint-staged',
        () => console.log(chalk.green('Git hook configured 👍')),
        spinner
    )
}

const askIfJsorTs = () => {
    const questions = [
        {
            name: 'ENV',
            type: 'list',
            choices: ['.Typescript', '.Javascript'],
            message: 'Please, select if this is a JavaScript or Typescript project',
            filter: function(val) {
                return val === '.Typescript' ? 'ts' : 'js'
            },
        },
    ]
    return inquirer.prompt(questions)
}

const setPrettierConfig = async () => {
    shell.ShellString(config).to(`.prettierrc.js`)
}
const success = () => {
    console.log(chalk.blue.bold(`Prettier Config completed`))
};

(async () => {
    init()
    await installPrettier()
    await setPrettierConfig()
    await installGitHook()
    const answer = await askIfJsorTs()
    const { ENV } = answer
    if (ENV === 'js') {
        await installPrettier()
        await setPrettierConfig()
    }
    if (ENV == 'ts') {
        const tsConfig = {
            parser: '@typescript-eslint/parser',
            extends: [
                'plugin:react/recommended',
                'plugin:@typescript-eslint/recommended',
                'prettier/@typescript-eslint',
                'plugin:prettier/recommended',
            ],
            parserOptions: {
                ecmaVersion: 2018,
                sourceType: 'module',
                ecmaFeatures: {
                    jsx: true,
                },
            },
            rules: {},
            settings: {
                react: {
                    version: 'detect',
                },
            },
        }

        // install eslint plugins
        const pluginSpinner = new Spinner('Installing plugin configs...')
        await installHelper(
            'npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev',
            () => console.log(chalk.green('Eslint Typescript plugin installed 👍')),
            pluginSpinner
        )

        // write eslintrc.js
        await shell.ShellString(tsConfig).to(`.eslintrc.js`)

        // install typescript prettier config
        const tsSpinner = new Spinner('Installing Typescript prettier configs...')
        await installHelper(
            'npm install prettier eslint-config-prettier eslint-plugin-prettier --dev',
            () => console.log(chalk.green('Eslint Typescript prettier configs installed 👍')),
            tsSpinner
        )
    }

    success()
})()

To test the CLI, simply run the below inside the root directory

node index

One last thing, notice the expression on the first line of index.js

#!/usr/bin / env node

It enables you to simply run prtfy inside any directory and have the cli run and install the configurations. I will leave you to do this. You can also publish as an npm module if you so wish.

Optimize the hell out of your Javascript programs with Memoization.

Ola' John Ajiboye — Tue, 23 Jul 2019 19:25:45 +0000

Many moons ago when I started learning algorithms, I had just learned recursion and was feeling like a Jedi. You know what they say?: "if all you have is a hammer, everything looks like a nail". I was trying to solve every task imaginable with some form of recursion. Turns out it was a terrible idea.

I got a rude awakening when I tried to solve a long sequence of Fibonacci series with Recursion, my computer just couldn't handle it. It still couldn't compute the result after a couple of hours. Full disclosure; it never did, I gave up, shut the whole damn thing down and started rethinking my decision to ever become a programmer. Why didn't I just learn how to rap, I could have become the next Jay-Z you know. I had no clue what was going on.

That was the first time I ever thought about the concept of optimization.

If you are the curious type, run the un-optimized recursive Fibonacci series with a sequence up to 50.....see you tomorrow!😃

So what is optimization?

So what is optimization and why do you need to start thinking about it even as an inexperienced developer.

An optimization algorithm is a procedure which is executed iteratively by comparing various solutions till an optimum or a satisfactory solution is found.

For example in the optimization of a design, the design objective could be simply to minimize the cost of production or to maximize the efficiency of production.

And now, what is Memoization?

I know you are tempted to think that I misspelled "memorization". But no! , I am positive I meant memoization. Memoization is a term in computer science which means the technique or optimization pattern that speeds up the execution of a program by storing the results of complex function calls (functions that takes a lot of time and consumes lots of memory during the run of the function) and returning the result stored in memory when the same inputs or arguments occur again.

Urgh!!, enough of the computer science jargons!. I don't even have a CS degree why should you trust my definitions. Allow me to show you the codes.

I will stick to the Fibonacci series that nearly made me quit programming. We'll explore an example of an un-optimized Fibonacci function and another one optimized using memoization.

Set up

To be able to visualize the difference. We'll need a little bit of one-time setup. I am a Javascript guy, I will be using a Node environment. You could use whatever performance metrics you are familiar with.

A NodeJS code sandbox will suffice. Let's install and require perf-hooks. Simply require performance from perf-hooks like so:

const { performance } = require("perf_hooks");
```


Now let's write a function that calculates the Fibonacci sequence of nth number recursively.



```javascript
function fibonacci(n) {
  if (n === 0 || n === 1)
    return n;
  else
    return fibonacci(n - 1) + fibonacci(n - 2);
}
```



This function performs well for small values of “n”. However, performance quickly degrades as “n” increases. This is because the two recursive calls repeat the same work. For example, to compute the 50th Fibonacci number, the recursive function must be called over 40 billion times (40,730,022,147 times to be specific)! We'll see this visually later.

## A memoized Fibonacci function.
In the memoized version of the Fibonacci function When f() is returned, its closure allows it to continue to access the “memo” object, which stores all of its previous results. Each time f() is executed, it first checks to see if a result exists for the current value of “n”. If it does, then the cached value is returned. Otherwise, the original Fibonacci code is executed. Note that “memo” is defined outside of f() so that it can retain its value over multiple function calls.



```javascript
var memoizeFibonacci = function() {
  var memo = {};

  function f(n) {
    var value;

    if (n in memo) {
      value = memo[n];
    } else {
      if (n === 0 || n === 1)
        value = n;
      else
        value = f(n - 1) + f(n - 2);

      memo[n] = value;
    }

    return value;
  }

  return f;
};

```


## Comparing performance with `perf-hooks`. 

Let's visualize the time it takes to compute 30th Fibonacci number with both functions.



```javascript
//un-optimized
// time before function is executed
const startTime = performance.now();
fibonacci(20);
// time after function has completed computation
const endTime = performance.now();

console.log("Un-optimized time", endTime - startTime);

// memoized
const startTime2 = performance.now();
memoizeFibonacci(20);
// time after function has completed computation
const endTime2 = performance.now();

console.log("Optimized time", endTime2 - startTime2);
```





```javascript
//result

Un-optimized:  1020.0609370004386
Optimized:  0.049122998490929604
```



You can see we already increased the time to compute by a magnitude of over 20000. That's just for a sequence of 30 numbers. This example is quite simple and may not look similar to your everyday tasks, but if you looked deeply there are a couple of things that can be optimized in your program. Keep in mind that memoization is just one optimization method, there are countless different strategies. Don't be the hammer guy that treats every problem like a nail.

Note also that we have barely scratched the surface of memoization, this is just to open our minds to the possibilities.

The fact that it works does not mean it can't be improved. Go forth and optimize!

PS: The title is a bit of an exaggeration. It just happened to be the 97th title that crossed my mind😃

Why thunk,sagas and so many middlewares for Redux?

Ola' John Ajiboye — Sun, 07 Jul 2019 11:06:07 +0000

Why do we have to use thunk sagas etc to hanlde async state chnages in React. Was it an after tought to Redux. VueX seems to handles these things well without additional middlewares.

Learn React Hooks and Context API by building a Recipe Search App (2)

Ola' John Ajiboye — Thu, 04 Jul 2019 09:08:23 +0000

This is the second part of the series in learning React Hooks and the Context API. In the first part we learn the basics of useState, built the first parts of the Recipe Search application. The full code can be found on github

Overview of what we'll learn in this section

In this section, we'll work a little bit more with states just to completely understand the concept. We'll explain useEffect. Build the RecipeSearch component. We'll then refactor our state management strategy to make use of the Context API(useContext). Exciting right?

First things ...

We won't be making too many comparisons with classical components from here forward. Instead, we'll focus more on learning the fundamentals of hooks. From the last part, I have extracted the RecipeDetails into its own component. This is for two reasons

It is the right thing to do, it's the point of component-based frameworks. It allows for code re-use.
Also, this will give us ample opportunity to see the problem that arises with passing props around(props drilling). And how context API can help us. More on that later! First, let's take a stab at useEffect

A quick primer of the `useEffect` hook

In the first part, we mentioned and used the useEffect hook but didn't give any detailed explanations. I am certain only a few of us realize the problem with the way we have utilized the useEffect hook in the first part.

Hint: remember how we had to create our own separate JSON response. So as not to make too many API calls?.

Ha-ha, we are doing something terribly wrong just using useEffect as we did before. I will dive into that in a bit.

But first, what is this useEffect hook ?. As the name implies, it must have something to do with effects right?, if that's what you guessed you are absolutely correct. But what sort of effects?.

From official React documentation, effects are actions related to data fetching, setting up a subscription, and manually changing the DOM in React components. These are all examples of side effects. Some call it "side effects" others just call it 'effects". We are referring to the same thing.If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Using the `useEffect` hook correctly.

Let's relate this information to our application. In App.js we have fetched data from the food2fork API function and then called the function in the useEffect function. This is equivalent to calling it inside the componentDidMount function. Let's take a closer look.

But think about it for a second. What is the intended use of componentDidMount?, the answer is in the name!. You only ever want to run any function inside this function when the component is mounted. Let's go over that information slowly. Mounting - is phase the component is created (your code, and react’s internals) then inserted into the DOM.

But, if you have a function that causes a repeated effect inside a componentDidMount your component will continuously re-render except you find a way to clean it up. This is done usually within the componentWillUnmount lifecycle.

How then does useEffect manage to replace componentDidMount and componentWillUnmount within one function. Let's revisit our wrong use of the useEffect to have a better grab of this. When we call the useEffect like below, the components continuously re-renders because it has no clue how to unmount. This is a terrible performance bottleneck.


// this isn't quite right. It works, but we'll see the problem later on
useEffect(() => {
    fetchRecipe()
  })

Let's do a post morterm to see the problem in action. Inside the fetchRecipe() in the App.js, try console logging something to indicate when the component is rendered. We could have also just inspected the Network tab in the browser. But sometimes console logging and seeing it in action will probably drive the point home faster.

On the third/hook-in-app.js branch of the repo. Edit App.js add the console.log and pop open your console. You should have something similar to below in the App.js for this little experiment.

import React, { useState, useEffect } from 'react';
import RecipeList from './components/RecipeList'
import RecipeDetails from './components/RecipeDetails'


function App() {
  const apiKey = `36920f6651c9cd9d91a6c3205cabaa19`
  let url = `https://www.food2fork.com/api/search?key=${apiKey}`
  const [showHomeButton, setShowHomeButton] = useState(false)
  const [recipes, setRecipes] = useState([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')


  const fetchRecipe = async () => {
      const recipeData = await fetch(url)
      const { recipes } = await recipeData.json()
      setRecipes(recipes)
      setLoading(false)
      console.log("I am beign rendered again and again")
  }

  useEffect(() => {
    fetchRecipe()

  })

  return (
    <div>
      {loading ? <h1 className="text-center">...fetching {search} Recipe</h1> :
        <RecipeList recipes={recipes} />}
    </div>
  );
}

You will get the horror below. What the hell is happening? This is not even acceptable behavior. We got away with it because of the JSON response I created. We could make unlimited API calls without issues. Obviously, this cannot be the right way to do things in production. So what's the problem? or even the solution.

What is immediately clear is that the fetchRecipe continuously tries to fetch a response from the API and is being re-rendered every time by useEffect. Even though nothing has changed. We naturally would have had to clean this up in a class component by unsubscribing from the API call within another componentWillUnmount. Let's look at how useEffect handle this problem.

Now that we have appreciated the problem, let's think about the solution. Pause for a moment, what do we actually intend to achieve? In our case we want the fetchRecipe function to run only once when the component mounts - that is fetch data once and display it. Or when anything has an effect on the result of the function. At this point, nothing affects the result. So how do we then overcome this problem? Quite simple it turns out.

Inside the useEffect function, we simply pass an empty array as the second parameter. Hence, we are indicating to the useEffect not to update except when the component is first mounted since we expect nothing to cause fetch recipe function to update. Just like below.

  useEffect(() => {
    fetchRecipe()
  }, []) // pass an empty array here.

And now if you went back into the App.js and do a console.log, you will realize fetchRecipe only runs once.

This is great, works well for our case. But what if we wanted to update and re-render after something causes fetchRecipe to change. You might ask what could this be. Let's say we have a state that changes the url for fetching the data. It means the data from fetchRecipe depends on url. We just simply pass that parameter inside the array passed to useEffect. Hence, we can pass as many parameters as needed into the array.


  useEffect(() => {
    fetchRecipe()
  }, [url,query])

What you are saying in human language to useEffect is that: only update when url or query parameter changes.

I recommend RobinWieruch tutorial for more examples if you still get confused.

Getting back to our app...

Let's build the `RecipeSearch` component.

Armed with the knowledge of safely fetching data, we'll now switch to using the API key from food2fork. Hence, we'll be doing some refactoring within App.js. We'll also introduce the best practice of having a try catch block inside the async function to catch any errors.

clone the 4/feature/implemented-search branch of the repo to follow along.

First, let's think of what we want to achieve with the search component and then think of how to achieve this. So, we want to enter a search, when we click submit or press enter, we want to change the content of the page to the new search result. And we also would want to be able to go back to the top 30 recipes, and thus clearing the search (or return to the top 30 results, depending on how you think about it). See what I mean below.

Now, we have a goal in mind, how do we write the code with hooks. Note, I am trying to make this as basic as possible, such that even with very basic React knowledge you can still build this. So not everything is exactly hook specific.

Immediately, it becomes obvious we definitely need some states to manage all those changes. First, we fetch another set of 30 recipe related to our search query. That's one state. We also have to decide when the Go back Home button should appear or disappear, you got it mate!. That's another state. Lastly, and perhaps the most important state is that holding our search parameter.

Like previously, let's look at how the code looks like in the App.js and then explain it line by line. Full code for search feature here

import React, { useState, useEffect } from 'react';
import RecipeList from './components/RecipeList';
import './App.css'


function App() {
  // remeber to replace key
  const apiKey = `36920f6651c9cd9d91a6c3205cabaa19`
  let url = `https://www.food2fork.com/api/search?key=${apiKey}`
  const [showHomeButton, setShowHomeButton] = useState(false)
  const [recipes, setRecipes] = useState([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [error, setError] = useState('')

  const fetchRecipe = async () => {
    try {
      const recipeData = await fetch(url)
      const { recipes } = await recipeData.json()
      setRecipes(recipes)
      setLoading(false)

    } catch (e) {
      if (e) {
        setError(e.message)
        console.log(error)
      }
    }
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      setLoading(true)
      const searchUrl = `${url}&q=${search}`
      const searchedRecipeData = await fetch(searchUrl)
      const { recipes } = await searchedRecipeData.json()
      setRecipes(recipes)
      setLoading(false)
      setShowHomeButton(true)
    } catch (e) {
      console.log(e)
    }
  }

  const handleSearchChange = (e) => {
    setSearch(e.target.value)
  }

  const handleReturnHome = () => {
    fetchRecipe()
    setShowHomeButton(false)
  }

  useEffect(() => {
    fetchRecipe()

  }, [])

  return (
    <div>
      {loading ? <h1 className="text-center">...fetching {search} Recipe</h1> :
        <RecipeList
          search={search}
          handleSubmit={handleSubmit}
          handleSearchChange={handleSearchChange}
          recipes={recipes}
          showHomeButton={showHomeButton}
          handleReturnHome={handleReturnHome} />}
    </div>
  );
}

export default App;

Noticed, how we have changed a couple of things. First, we are now safely making API requests directly. Hence, we are using our real API keys. It will become apparent why we can't continue using my json anyways. Let's go line, by line.

We have set a variable for the url. We know how the URL endpoint looks like from the food2fork documentation. Next, we set up a state with for showHomeButton to handle visibility for the home button. And set the initial value to false. That is,
initially when we'll be in the home page, there's no point displaying home button. The next two states are already familiar. Then we have the search state, and we set the original value to an empty string. Since we are not searching for anything yet when we first visit the home page.

Next, we have to manage how we respond to user typing in the search query. We have set up the handleSearchChange function to handle that. We have the handleSubmit button to take care of updating the data in the list to match the result from the search. And finally, we have the handleReturnHome function to obviously, you guessed right. Help us return home safely with just the 30 top recipes.

Let's examine how each function performs its duty.

First, handleSearchChange . The purpose is to capture user entry and then update the search state to equal user entry. This is quite straight forward as the function body is even just 1 line.


 const handleSearchChange = (event) => {
    setSearch(event.target.value)
  }

Here is how it works, since we are responding to user input, we have access to the onChange property from the event object. We have simply grabbed the value from the event.target.value and updated the search state with this value using the setSearch hook. We then need to pass them as props all the way down to the RecipeSearch component like below. This is one of those things to solve with Context API.

Next, let's examine the most interesting function in App.js. The handleSubmit. What does it do? Let's look at the code first and then explain.

 const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      setLoading(true)
      const searchUrl = `${url}&q=${search}`
      const searchedRecipeData = await fetch(searchUrl)
      const { recipes } = await searchedRecipeData.json()
      setRecipes(recipes)
      setLoading(false)
      setShowHomeButton(true)
    } catch (e) {
      console.log(e)
    }
  }

Since this is going to be triggered on submit. We have access to the event object. First, we need to prevent the default behavior of onSubmit which is to reload the page, hence we have e.preventDefault(). We set the loading state to true with setLoading(true) indicating we are still fetching data. We then take the current state of search that is now equal to the input by the user. We use this to create a new API point based on the documentation we have from food2fork. And then fetches new data based on this search query. It then updates the current recipe state with setRecipe to match with the new data from the search query. Now that we have the data we set loading state to false using setLoading(false). Now the new recipe list is based on the search query, we need a way to go back home. Hence, we have set the showHomeButton to true using setShowHomeButton.

Lastly, we have the handleReturnHome function whose job is to get us back home with the top 30 recipe list. So we simply fetched recipe as we did originally, this already sets back the recipe state back to how it was. We then set the showHomeButton back to false, making the button disappear when we are on the home page. We then simply passed down all the required states as props to child components where we'd use them.

`The Context API`

React Context API is essentially a way to create global states that can be used anywhere within the application. This is an alternative to passing down props from grandparents to children and so on. It's been touted as a lighter alternative to Redux. In my experience, I will say it more closely resembles Vue's VueX. Where you have a single source of truth and can access that state globally.

Let's examine the case of props drilling in our application. You can imagine in an application simple as this, we already have to pass props from App.js through RecipeList and then to RecipeSearch. Even though RecipeList component does not need the handlesSubmit and handlesSearchChange props we still need to pass them through because it's the parent component to RecipeSearch. Imagine more deeply nested components trees, then you can already see chaos. Libraries like Redux helps solve this problem but context is a simple lightweight version.

useContext hook to the rescue

So what if we could access whatever state we want higher up within the component tree and just use them only where they are needed. This is what we are going to do next with useContext hook. There are a couple of things to understand with context API.

Context is designed to share data that can be considered “global” for a tree of React components.
Context is primarily used when some data needs to be accessible by many components at different nesting level

Let's discuss the API that context gives us. First we have React.createContext. It create a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.

Context.Provider - Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.

Context.Consumer - A React component that subscribes to context changes. This lets you subscribe to a context within a function component.

Let's bundle all this into our example and see how it works.

First, let's create a context folder or just a file with and index.js file in it. Inside index.js we need to create a Provider that accepts and provides the data to all children components within it. First, let's move all our data fetching logic from App.js into the context file. You should be left with an almost empty App.js like below.

import React, { useContext } from 'react';
import RecipeList from './components/RecipeList'
function App() {

  return (
    <div>
      {loading ? <h1 className="text-center">...fetching {search} recipe</h1> :
        <RecipeList />}
    </div>
  );
}
export default App;

And index.js ...

import React, { useState, useEffect } from 'react'

const RecipeContext = React.createContext()

const apiKey = `7cdab426afc366070dab735500555521`

const RecipeProvider = (props) => {
  let url = `https://www.food2fork.com/api/search?key=${apiKey}`
  const [showHomeButton, setShowHomeButton] = useState(false)
  const [recipes, setRecipes] = useState([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')

  const fetchRecipe = async () => {
    try {
      const recipeData = await fetch(url)
      const { recipes } = await recipeData.json()
      setRecipes(recipes)
      setLoading(false)
      console.log(recipes)
    } catch (e) {
      if (e) {
        console.log(e.message, 'Try updating the API key in App.js')
      }
    }
  }
  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      setLoading(true)
      const searchUrl = `${url}&q=${search}`
      const searchedRecipeData = await fetch(searchUrl)
      const { recipes } = await searchedRecipeData.json()
      setRecipes(recipes)
      setLoading(false)
      setShowHomeButton(true)
    } catch (e) {
      console.log(e)
    }
  }
  const handleSearchChange = (e) => {
    setSearch(e.target.value)
  }
  const handleReturnHome = () => {
    fetchRecipe()
    setShowHomeButton(false)
  }

  useEffect(() => {
    fetchRecipe()

  }, [])

  return (
    <RecipeContext.Provider value={{
      loading,
      search,
      showHomeButton,
      recipes,
      handleSearchChange,
      handleSubmit,
      handleReturnHome,
    }}>
      {props.children}
    </RecipeContext.Provider>
  )
}

export { RecipeProvider,  RecipeContext }

Let's try to understand the above code by taking it apart carefully.

We have simply moved all the logic for data fetching from our App.js into index.js so as to make it available globally. We already know the drill, we have the data and the states just like we did before.

Now, to the interesting part, on line 2. We have created the RecipeContext from React.createContext() method. RecipeContext is just a variable, the name is not relevant, it is simply good practice to give it a name close to what it does. When we created the RecipeContext it gives us access to 2 other properties namely the Provider and the Consumer. The Provider gives us a way to pass all the data and states as props from the topmost part of React tree to wherever we would like to consume it. Hence we created RecipeContext.Provider and passed down all states and data as a prop called *value *. We then export these values to be used. Like below. It will become clearer when we begin to use them.

 <RecipeContext.Provider value={{
      loading,
      search,
      showHomeButton,
      recipes,
      handleSearchChange,
      handleSubmit,
      handleReturnHome,
    }}>
      {props.children}
    </RecipeContext.Provider>
  )
}

export { RecipeProvider,  RecipeContext }

Next, we have to locate the highest tree in our component hierarchy to pass the value props to. It's only through this way that it can be able to pass it along to all its children. And that would be the index.js in our root. This is where the App component is located. Hence, the App component is able to pass any data or state as props to wherever it will be needed. In the index,js in the root of your application. You should wrap the RecipeProvider around App like below.

import React from 'react';
import ReactDOM from 'react-dom';
import { RecipeProvider } from './context/index'

ReactDOM.render(
  <RecipeProvider>
    <App />
  </RecipeProvider>
  , document.getElementById('root'));

From here henceforth all the props pass down inside our context file is available to all the children of App component, which is essentially every component. The exciting part is how we'll then use this. We'll make an example with RecipeList and RecipeSearch components. Your RecipeList component should look like below.

import React, { useContext } from 'react'
import Recipe from './Recipe'
import RecipeSearch from './RecipeSearch'
import { RecipeContext } from '../context/index'

export default function RecipeList() {
  const appContext = useContext(RecipeContext)
  const { showHomeButton, recipes, handleReturnHome } = appContext

  return (
    <>
      <RecipeSearch></RecipeSearch>
      <div className="container my-5 home-button">
        {showHomeButton && <button type="button"
          className="btn btn-warning"
          onClick={() => handleReturnHome()}>
          Go Back Home
        </button>}
        <div className=" d-flex d-flex justify-content-center mb-3">
          <h1 className="text-slaned ">Recipe List</h1>
        </div>

        <div className="row recipe-list">
          {recipes.map(recipe => {
            return <Recipe
              key={recipe.recipe_id} recipe={recipe} />
          })}
        </div>
      </div>
    </>
  )
}

We have now imported RecipeContext from our file and imported useContext from React. Inside our function, we created a variable to hold the value of RecipeContext. We then just grab only the values we need inside RecipeList. This is so clean in many ways, 2 of which are.

First, we just went to RecipeList straight where we needed those states and data, we didn't have to thread the props from parent to children.
Second, we only extracted the props we needed within the component, we didn't need to give RecipeList some props it didn't need but just has to pass along to its children. We just go to that child component directly if they needed the data.

Let's examine RecipeSearch component. Once again, let's see the code and then explain it.

import React, { useContext } from 'react'
import { RecipeContext } from '../context/index'

export default function RecipeSearch() {
  const appContext = useContext(RecipeContext)
  const { handleSubmit, handleSearchChange } = appContext

  return (
    <div className="container d-flex justify-content-center my-5">
      <form className="form-inline" onSubmit={(e) => handleSubmit(e)}>
        <label htmlFor="search" >Search:</label>
        <input data-age="Love" onChange={(e) => handleSearchChange(e)} type="text" className="form-control" id="search" placeholder="coffeee" name="search" />
        <button type="submit" className="btn btn-primary"><i className="fa fa-search"></i></button>
      </form>
    </div>
  )
}

Like in the RecipeList we have imported useContext and RecipeContext. We created the variables. And just see how clean and concise this is, we didn't have to get handleSubmit and handleSearchChange from RecipeList we just simply grabbed them from the context here.

And that's just about it. We have covered 3 major types of hooks. useState, useEffect and useContext. I believe these are the foundation necessary to understand more advanced and better ways to work with react hooks. I believe they are cleaner and easier to digest for a beginner.

Moving forward, if you'd like to gain a deeper understanding. You can refactor the Recipe component to use the useContext. Take an old project with a class component and convert it into a functional component just using hooks. If you want something more challenging, learn the useReducer hook and how we can refactor multiple states in our context file to make use of useReducer

Thank you!. The full code can be found on github. Comments and feedback are welcomed.

Let's learn React Hooks and Context API by building a Recipe Search App

Ola' John Ajiboye — Sat, 29 Jun 2019 00:11:23 +0000

This is a beginner tutorial in understanding React Hooks and the Context API. In reality, this is more of an attempt to explain these concepts to my self and to interested readers. This will be in two parts with this first part focusing on the basics of hooks. The other part will hopefully focus more on more advanced use cases and the Context API. We'll implement the search functionality and convert to using the Context API for managing states and avoiding props drilling.

Update : Part 2 is live here

How are we going to learn?

We'll look at some contrast on handling the same state logic with a class component, and then with React Hooks. We will be building a Recipe Search application to solidify the concepts, we'll then have a bottle of red wine to celebrate😃. I believe messing with the code is the best way to learn.

Final Version of what we'll be building

We'll build a simple clone of the food2fork website. This will not be a fully fledged version of it, but we'll use their API with the top 30 recipes. Add some UI logic of our own just to mess with the states and see how we handle them with hooks.

Prerequisite

Basic Knowledge of React
Javascript ES6 fundamentals [Array methods, Destructuring, etc]

So what is a React Hook?

First things first, so what is React Hook? From documentation

What is a Hook? A Hook is a special function that lets you “hook” into React features. For example, useState is a Hook that lets you add React state to function components.

In simple English, hooks allow us to "hook" into specific React Features. For example useState as the name implies helps us to use state feature in React where we otherwise wouldn't be able to use it, i.e inside a function component. We'll explain a little bit in details the syntax usage etc through building the recipe search application.

Set Up

We'll be using create-react-app to bootstrap the application. I have created a repo with a barebone create react app that we can quickly get started with. Simply clone to follow along. Run the command below:

git clone https://github.com/olajohn-ajiboye/Blog-React-Hook-Tutorial.git
cd Blog-React-Hook-Tutorial

Going back to the app we'll be building. We shall be using the food2fork API to fetch and search a list of 30 top recipes. However, the API has a limited query we can make per day. I have created the exact JSON response from them for this tutorial. This will be served from here here so that we won't be hitting their server too frequently.

Let's create the component folder in our src folder to hold the different components our app is likely to have. Take a moment to think about that, there will be a component displaying each Recipe, a RecipeListcomponent to render a list of the recipes, a RecipeSearch component and RecipeDetails component for displaying additional details for each Recipe. All components will be functional components, since using hook is the point of this tutorial.

If you did everything correctly, you should have a folder structure like below. You can also clone the second branch in the repo here to jump to this point in the tutorial.

If you have not already, one extension I will recommend installing is the ES7 React/Redux/GraphQL/React-Native snippets. It speeds up your React development by allowing you to type shorthands to get some React Snippet. You can find out more here

So let's get `Hooked`

Why even Hooks?

One of the most common things you will do in any frontend application is fetching and displaying data, and manipulating display for great UX. React is no different. One of the common use cases of state is to store data from an API call. Before hooks, if you needed to have a state of any type within your app, you absolutely have to use a class component. You'd also need to fetch data asynchronously within the componentDidMount lifecycle. For many, this isn't a mighty problem, but the React team believes it gives rise to the tight coupling of component logic. Also in more complex apps, it is hard to reuse stateful logic. Don't take my word for that, just read the motivation for hooks here

Let's look at how we'll handle fetching data from the REST API I have created in a classical component, before moving to how we are going to handle it with hooks


import React, { Component } from 'react'
import RecipeList from './components/RecipeList

export default class test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      apiResponse: [],
    }
  }
  componentDidMount() {
    fetch(`https://api.myjson.com/bins/t7szj`)
      .then(data => data.json)
      .then(apiResponse => this.setState({ apiResponse }))
  }
  render() {
    return (
      <div>
          <RecipeList recipes={this.state.recipes}>
      </div>
    )
  }
}

Let's take a look at the same code with Hook and Effect followed by an explanation


import React, { useState, useEffect } from 'react';
import RecipeList from './components/RecipeList

function App() {
  const url = useState(`https://api.myjson.com/bins/t7szj`)
  const [recipes, setRecipes] = useState([])

  const fetchRecipe = async () => {
    const recipeData = await fetch(url)
    const { recipes } = await recipeData.json()
    setRecipes(recipes)
  }

  useEffect(() => {
    fetchRecipe()
  })

  return (
    <div className="App">
      <RecipeList recipes={recipes}>
    </div>
  );
}

export default App;

There are a couple of things that are obvious right away, we have imported useState and useEffect from react. These are the APIs exposed to us that enables us to use React Hooks. The useState Hook accepts the initial state. In the example above we have initialized it into an empty array. We expect to populate the array with data from the API call. This is equivalent to below in our class component.

 this.state = {
      apiResponse: [],
    }

Furthermore, the useState returns a pair of values to us. They are the current state and a function that updates it. So we get back [currentState, setStateFunction] from the use state. That is why we have written const [recipes, setRecipes] = useState([]) in our application. Where recipes is an array to hold our recipe data. setRecipe is the function that enables us to update the state, this is equivalent to this.setState in a class component.

In case the syntax looks confusing, these are not React specific syntax, but plain ES6 Javascript. This is known as destructuring. Since the useState returns a pair of value, we have destructured it into an array. The name we choose for them does not affect their behavior, it is simply good practice to name them as [name of your state, set+name of state], hence we have :

const [recipes, setRecipes] = useState([])

If you need some refresher or primer on destructuring, I have written a little bit about it here.

Another Javascript feature we need to take note of to fully understand what is going on here is closures. Due to Javascript closure, we have access to the destructured variables from the useState anywhere within our function. Hence, inside the fecthRecipe function and anywhere within the component we can use the setRecipe or any other variables without having to call it this.setRecipe etc.

For the purpose of this tutorial. A simplified definition of closures is that it gives us access to the outer (enclosing) function's variables—scope chain, and also to their return values.

You can read more here, here and watch here

Let's quickly pass the props down our components and get them set up to display the list of Recipe. Since this isn't a Hook specific feature. I am going to skip it. You can find the updated repo up to this point here. I have also added styling to speed things up. The updated repo is on the third/hook-in-app.js branch in the repo.

Using the `useState`

At this point, your App.js should look like below, we have simply passed down the recipes array inside our state as a recipes props to the RecipeList component. Note, I have also added a loading state with the useState and set it back to false after data is completely fetched. This the first example of using multiple states.


import React, { useState, useEffect } from 'react';
import RecipeList from './components/RecipeList'
import RecipeDetails from './components/RecipeDetails'


function App() {
  const url = `https://api.myjson.com/bins/t7szj`
  const [recipes, setRecipes] = useState([])
  const [loading, setLoading] = useState(true)
  const fetchRecipe = async () => {
    const recipeData = await fetch(url)
    const { recipes } = await recipeData.json()
    setRecipes(recipes)
    setLoading(false)
  }
  useEffect(() => {
    fetchRecipe()
  })
  return (
    <div>
      {loading ? <h1 className="text-center">...loading</h1> : <RecipeList recipes={recipes} />}
      <RecipeDetails></RecipeDetails>
    </div>
  );
}

export default App;

Next, let's move to the RecipeList component and see what we have.

Here we have simply received the recipes passed as a prop from the parent App component and immediately destructured it --see line 5. We then mapped over it, pass down each recipe to the Recipe component as prop. Nothing particularly interesting here.

import React from 'react'
import Recipe from './Recipe'
import RecipeSearch from './RecipeSearch'

export default function RecipeList({ recipes }) {

  return (
    <>
      <RecipeSearch></RecipeSearch>
      <div className="container my-5">
        <div className="row">
          <div className="col-10-mx-auto  col-md-6 text-center text-uppercase mb-3">
            <h1 className="text-slaned text-center">Recipe List</h1>
          </div>
        </div>
        <div className="row">
          {recipes.map(recipe => {
            return <Recipe key={recipe.recipe_id} recipe={recipe} />
          })}
        </div>
      </div>
    </>
  )
}

Now to the fun part.

Inside the Recipe component, I have added some contrived states that are simple enough to fully understand. We'll make an attempt to go line by line, trying to understand what we are doing and how we are handling stateful logic with the useState hook . You should have the below in your Recipe component.

import React, { useState } from 'react'

export default function Recipe({ recipe }) {
  const { image_url, publisher, title, recipe_id } = recipe
  const [showInfo, setShowInfo] = useState(false)
  const [recipeDetails, setRecipeDetails] = useState([])
  const { ingredients, social_rank } = recipeDetails

  const handleShowInfo = async (e) => {
    const { id } = e.target.dataset
    const response = await fetch(`https://www.food2fork.com/api/get?key=7cdab426afc366070dab735500555521&rId=${id}`)
    const { recipe } = await response.json()
    setRecipeDetails(recipe)
    setShowInfo(!showInfo)
  }
  return (
    <>
      <div className="col-10 mx-auto col-md-6 col-lg-4 my-3">
        <div className="card">
          <img src={image_url} alt="recipe" className="img-card-top" style={{ height: "14rem" }} />
          <div className="card-body text-capitalize">
            <h6>{title}</h6>
            <h6 className="text-warning">
              Provided by: {publisher}
            </h6>
          </div>
          <div className="card-footer">
            <button type="button" style={{ margin: `13px` }} className="btn btn-primary text-center" data-id={recipe_id} onClick={handleShowInfo}>More Info</button>
            {showInfo &&
              <button key={recipe_id} type="button" style={{ margin: `13px` }} className="btn btn-success text-center font-weight-bold" >{social_rank}</button>}
            {showInfo ?
              ingredients.map((i, index) => {
                return <ul key={index} className="list-group">
                  <li className="list-group-item" >{i}</li>
                </ul>
              })
              : null}
          </div>
        </div>
      </div>
    </>
  )
}

Let's understand the code above. Like previously, we have received the recipe as a prop from it's parent component which is the RecipeList we have then destructured it immediately within the function argument. We then went ahead to further destructure the parts we intend to use from the recipe object. I know what the recipe object contains because I have tested the API, so this isn's some magic. This is equivalent to below

export default function Recipe(props) {
    const recipe = this.props.recipe
    const { image_url, publisher, title, recipe_id } = recipe

}

Now to some useful state. If you checked the application. You'd realize that when we clicked on the more details button we get the extra information related to that recipe, specifically the list of ingredient and the social rating. Take a peek at the gif on top for a refresher. So we need some kind of state to handle the desired user interaction.

Think about it for a moment, we need a way to toggle between if more info should be shown or not. We also need a way to fetch the info for the specific recipe. The desired result will then be stored in some kind of state. Viola, we have identified at least 2 states. Hence in our Application, we have a showInfo and a recipeDetails state.

With the information we have, let's use the useState Hook to work with this.

First, we declare the showInfo state and the function to set the showInfo setShowInfo (equivalent to this.SetState). We set the value to false
Second, we declare the recipeDetails and the setRecipeDetails. We set the value to an empty array [].

That's hopefully simple enough, we have set up the initial states. And prepared for handling state change with setShowInfo and setRecipeDetails.

Moving to the handleShowInfo function. This is an async function that basically helps to fetch data. And also handling state change to show the info or not. Let's take it apart line by line.
Since we intend to call handleShowInfo on click of a button we have access to the event object. Inside the button, we have set the recipe_id as a data-attribute. This enables us to grab the id for the specific recipe. Inside the handleShowInfo, we then get hold of the id by extracting it out of the event.target property. Since we need to get additional info, there is a need to make an HTTP request with the id. This is what we have done next and awaited the response. We then converted the value to a json and store the value in const recipe.

*Note: * You may need to get an API Key from food2fork. The current key will probably be out of limit.

The recipe we get as response is the slotted inside the setRecipeDetails to serve as and updater for the recipeDetails. At this point, we have simply set the state of recipeDetails to the array response variable recipe. This is equivalent to

this.setState{
recipedDetails: recipe
}

Another thing is that we set the value of showInfo to the opposite of what it was. This is what creates the toggle effect whenever the button is clicked. This is equivalent to.

this.setState{
showInfo: !showInfo
}

And that's about it, in the returned jsx we conditionally rendered the info based on the state of showInfo when the button is clicked. We have additionally mapped over the array of ingredients to display them as the additional info.

This is the end of this very basic introduction of hooks and perhaps an oversimplification. In the next iteration of this series, we shall examine hooks in more details and then learn the Context API.

Hope you enjoyed the introduction. Feedbacks are welcomed. Stay tuned for the next update and see you soon. Thank you!