DEV Community: Aviskar KC

JSX gotcha when conditionally rendering using `&&`

Aviskar KC — Thu, 16 Apr 2020 09:09:29 +0000

There are tons of ways to conditionally render your React components, with one of them being the && operator. For eg:

// this will only display MyComponent if displayData is a truthy value
{displayData && <MyComponent data={this.state.data} />}

But what if data is an array, and you want to make sure data isn't empty when rendering MyComponent. A common pattern is:

{this.state.data.length && <MyComponent data={this.state.data} />}

This works fine for the truthy values of data like when data.length is greater than 0, but if data.length is equal to 0, this creates problems. Instead of rendering nothing like we intend to do here, the value 0 is rendered. This is because:

// returns MyComponent and it is rendered by React.
{true && <MyComponent />}

// returns false and nothing is rendered by React.
{false && <MyComponent />}

// data.length returns 3, which is a truthy value, so MyComponent is rendered.
data = [1, 2, 3];
{data.length && <MyComponent />

// data.length returns 0, which is falsy value and 0 is rendered.
// Which is a problem as want nothing to be rendered.
data = [];
{data.length && <MyComponent />}

In the last case, 0 is rendered because unlike true or false, 0 is an actual valid. You can fix this issue by using a ternary operator whenever you want to conditionally render components by checking for the length of an array or by converting the condition to an expression that returns either true or false.

{data.length ? <MyComponent /> : null}

// or

{data.length > 0 && <MyComponent />}

Note this happens with other falsey values that are valid JSX syntax like NaN and -0 too.

Using AbortController out in the wild

Aviskar KC — Thu, 09 Apr 2020 16:46:15 +0000

I recently had to cancel requests made by fetch in one the projects I was working on and had a chance to use AbortController. Now there are some really good resources to learn about AbortController like this one by Jake Archibald, but very few showcase using it in a real life scenario. Usually the examples in these tutorials will have a button to make an api call and a second one to cancel it. Although that's a good example to get started with, but I can't think of a case where I might ever build some thing like that in a "real" project. So here's an example where you might actually use AbortController in a real life scenario.

Imagine a search bar, where you need to make the api call to fetch data as you type. Something like this:

Now, you will definitely come across a situation where a promise resolves faster than a previous one and you will be left displaying stale data to the user. You can definitely use ol' reliable debounce for this, but that still doesn't solve your issue all the time.

This is where AbortController comes to your rescue!!! If a new api call is made while the previous one hasn't resolved, you can cancel the previous one using AbortController.

If you wanna jump into the code straight away here's a demo, but if you wanna know more what's going on, you can follow the blog furthermore:

In the index.html file, we have our input field.

 <input
   class="search-field"
   type="text"
   id="search"
   placeholder="Search for a joke"
>

On every keyup event, this input field fires a call to fetch data from our api:

// variable to track whether or not we are fetching data
let isLoading = false;

// event listener for our input field 
searchEl.addEventListener("keyup", e => {
  fetchQuote(e.target.value);
});

// function to call api and fetch data based on our search query
async function fetchQuote(search) {
  try {
    isLoading = true;

    const response = await fetch(
      `https://api.chucknorris.io/jokes/search?query=${search}`,
      { signal }
    );

    const data = await response.json();

    const jokes = data.result.slice(0, 5);

    isLoading = false;
    renderJokes(jokes);
  } catch (err) {
    isLoading = false;
  }
}

Note that we have a isLoading variable to tell us whether or not we have a pending promise.

Now that the logic for calling our api is done, let's initialize our AbortController:

let abortController = new AbortController();
let signal = abortController.signal;

And now to actually cancel our api call inside the fetchQuote function you can add abortController.abort() function:

async function fetchQuote(search) {
  try {
    // Cancel our api call if isLoading is true
    if (isLoading) {
      abortController.abort();
    }

    isLoading = true;

    // Pass the "signal" as a param to fetch
    const response = await fetch(
      `https://api.chucknorris.io/jokes/search?query=${search}`,
      { signal }
    );
    // rest of the function is same as above
  } catch(err) {
    isLoading = false;
  }
}

Now that aborted request is cancelled, it actually goes to our catch block. Since technically this isn't an error, we can bypass this by checking for abort errors:

catch(err) {
  // Only handle errors if it is not an "AbortError"
  if (err.name === 'AbortError') {
    console.log('Fetch aborted');
  } else {
    console.error('Uh oh, an error!', err);
  }
}

Now any request we make cancels the previous request if it hasn't resolved yet.

But there is a catch, this doesn't work for subsequent requests and only works for the first request. For AbortController to work for all of our subsequent requests, we need to create a new one each time we abort a request. Which leaves us with the following:

async function fetchQuote(search) {
  try {
    if (isLoading) {
      // Cancel the request
      abortController.abort();

      // Create a new instance of abortController
      abortController = new AbortController();
      signal = abortController.signal;
    }

    isLoading = true;

    const response = await fetch(
      `https://api.chucknorris.io/jokes/search?query=${search}`,
      { signal }
    );

    const data = await response.json();

    const jokes = data.result.slice(0, 5);

    isLoading = false;
    renderJokes(jokes);
  } catch (err) {
    isLoading = false;
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Uh oh, an error!', err);
    }
  }
}

And now we are finally able to successfully use abort-able fetch requests out in the wild:

Array.sort gotcha: Case of the missing key

Aviskar KC — Sat, 21 Mar 2020 08:49:12 +0000

When you are working as a web developer, you will have to sort an array in ascending or descending order at some point in time.

To sort arrays based on some value, we can use the built-in Array.prototype.sort() function which works as follows:

// sort in ascending order
array.sort(function (a, b) {
  if (a < b) {
     return -1;
  }

  if (a > b) {
     return 1;
  }

  if (a === b) {
     return 0;
  }
});

// sort in descending order
array.sort(function (a, b) {
  if (a < b) {
     return 1;
  }

  if (a > b) {
     return -1;
  }

  if (a === b) {
     return 0;
  }
});

Since the array.prototype.sort() function depends on positive, negative and zero values to determine the order of elements, we can simplify the above logic if we are working with numbers:

// sort in ascending order
array.sort(function (a, b) {
  return a - b;
});

// sort in descending order
array.sort(function (a, b) {
  return b - a;
})

So if we are sorting an array of object, in ascending order, our code will look like this:

let array = [{ id: 1, value: 10 }, { id: 2, value: 2 }, { id: 3, value: 5 }];

// sort in ascending order:
array.sort(function(a, b) {
  return a.value - b.value;
});

// Output => [{ id: 2, value:  3 }, { id: 3, value: 5 }, { id: 1, value: 10 }];

But imagine I introduce a new element into the mix, which doesn't have the key value:

// New element { id: 4 } which doesn't have the key `value`
let array = [{ id: 1, value: 10 }, { id: 4 }, { id: 2, value: 2 }, { id: 3, value: 5 }]; 

// sort in ascending order:
array.sort(function(a, b) {
  return a.value - b.value;
});

// Output => [{ id: 1, value: 10 }, { id: 4 }, { id: 2, value: 2 }, { id: 3, value: 5 }];

Because our new element doesn't have the key value, accessing it will return undefined. Now, trying to subtract a number with undefined will result in NaN and cause our sort function to not work as intended.

I recently got stung by this gotcha and worked around it by assigning 0 to the missing values:

// New element { id: 4 } which doesn't have the key `value`
let array = [{ id: 1, value: 10 }, { id: 4 }, { id: 2, value: 2 }, { id: 3, value: 5 }]; 

// sort in ascending order:
array.sort(function(a, b) {
  const valueA = a.value || 0;
  const valueB = b.value || 0;

  return valueA - valueB;
});

// Output => [{ id: 4 }, { id: 2, value: 2 }, { id: 3, value: 5 }, { id: 1, value: 10 }];

As I was ordering array of objects in descending order by likes, this worked perfectly for my use case.

.npmignore: A small step towards unbloating JS

Aviskar KC — Sun, 26 Jan 2020 16:51:51 +0000

Javascript bloat is a real thing. There are blog posts out there that help you migrate from a heavy library to a much smaller one while tools like bundlephobia help you calculate the cost of adding a package to your application.

As library maintainers, you can make use of .npmignore to ignore unnecessary files from being included in your package which will in turn help reduce the amount of code that gets shipped to projects that use your library.

Some of the things you can keep out of your package are:

1) If your package only requires the final build file to work, you can keep out the src folder.
2) The tests folder.
3) The files containing demos/examples of how your library works.
4) Your dotfiles that aren't already in .gitignore like eslint/prettier configs.

Ignoring these files, helped me bring down my library, react-d3-donut's size (which was previously around 1MB) down to just 138B.

The .npmignore file works exactly like .gitignore in terms of syntax and how you would whitelist/blacklist file. You can find .npmignore's documentation here:
https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package

A bash script to create .gitignore files

Aviskar KC — Thu, 10 Oct 2019 18:00:23 +0000

Created a bash script that generates .gitignore files of your language of choosing.

https://github.com/aviskarkc10/gitignore

The .gitignore files are pulled from https://www.gitignore.io.

Feedback are welcome.