3 cool things you can do in JS/React that you may not know

The title says it all. Let’s get straight into this.

1. Create a dummy array to duplicate components

Say you want to create a loading state or empty state where you’ll duplicate a number of components…

Sure, you could just copy/paste the component several times and be done with it. But code like this makes me feel like I suck at programming... 😝

<DummyMessageBlock />
<DummyMessageBlock />
<DummyMessageBlock />

Instead, you can create a dummy array, and return the component for each item you want to duplicate like this:

let DuplicatedBlocks = [...Array(5)].map((_, index) => {
    return <DummyMessageBlock key={index} />
});
return DuplicatedBlocks;

[...Array(5)] initiates an empty array of 5 items. If you console.log this, it would look like this:

[undefined, undefined, undefined, undefined, undefined]

The reason this works is that the map method allows you to loop through these and return your new component for each of the undefined placeholder values in your array.

You could even turn this into a component to make it even more dynamic.

Look at all the pretty colors and dynamism!

2. Simulate latency and clear your timeout all in one go

So your application is fast. Maybe it’s too fast… And now all the cool loading animations you created never see the light of day… 😭

A little bit of loading can actually be a good thing, because if your application zips around and makes instant changes all the time, it’s likely your users will have no idea what is going on.

Instantaneous state changes. How do I stay impressed while also hiding my bewilderment?

If you find yourself in this predicament, there’s setTimeout to the rescue!

const newPosts = await YOUR_DATA_IS_ALREADY_HERE;
const delayFetchingPosts = setTimeout(() => {
   this.setState({
     posts: newPosts,
     ...
   },
   () => clearTimeout(delayFetchingPosts));
}, 500);

The cool part about this is that in the setState callback, you can clear your timeout and keep everything tidy.

One example of where you might want to use this is if you are doing client-side pagination. Your data is already there, so loading more items takes 0.000000000000000000000001 seconds.

By simulating the loading time, users will have a bit more comfortable user experience because they can see a chain of request -> visual feedback -> response that we are all accustomed to seeing.

3. Create template-based components without React

Yeah, that’s right. You don’t need the magical library to do similar things. 🦄

Although big disclaimer, if you try to do this in vanilla JS, you must be very certain that the data you pass to your functions is secure, since JS won’t automatically escape these values like they do in React.

So you have to be careful about XSS when you do this by sanitizing any values or making sure the values passed are only ones that you control.

As I was saying, in React maybe you’d create a component to display a name like this:

const NameTag = name => <p>Hi, I'm {name}</p>;
<NameTag name="Jack" />
// Renders "Hi, I'm Jack"

In Vanilla JS, you can do the same thing using template literal strings:

const NameTag = name => `<p>Hi, I'm ${name}</p>`;

This knowledge gives us renewed appreciation for React and how JSX simplifies the work we do.

I think it also helps us understand and appreciate the roots of where React comes from — 🍦 JavaScript.

Conclusion

Knowing these tricks is useful when you find yourself searching stack overflow with a use case that calls for them.

If you liked the article, please clap and share. A please post your own tips in the comments below!