DEV Community: Alexandre Desroches

Parcel.js v2 Bundler, is an excellent web development build tool.

Alexandre Desroches — Sat, 16 Oct 2021 13:56:42 +0000

Parcel Version 2 was publicly released on October 13 of 2021 - as seen in their blog post and also on Twitter by the creator of Parcel, Devon Govett.

Version 2 of the Parcel build tool is simple and efficient.

During a year and a half - as a new web developer learning mostly Javascript, HTML, CSS and React - I was searching for the perfect build tools to create web applications and web sites.

Well, it was almost impossible to find one that did "everything" simply and efficiently. By "everything" I mean that it provides out-of-the-box:

Dev server for Javascript, HTML, CSS based projects.
Default loaders to handle regular web site and web apps requirements like loading images, SVGs, multiple CSS and JS files, etc.
Optimized production builds - without any complex configs that can waste hours of your day each time you start a new project.
Speed and performance.
Proper usage of HTML and CSS files rather than everything handled by Javascript.

Parcel v2 replaced a Webpack 5 project in 10 minutes.

No jokes. I had a project using Webpack 5 and a super complex configuration which took me days to setup!

I went on the Parcel website and read the get started guide for web apps which took 1 minute. Then in my project, I deleted my node_modules folder and every dev dependencies I had related to Webpack in my package.json file. Then I installed Parcel as stated in the guide, setup the scripts in package.json then ran the npm install command. Then I executed npm start a few times to see console error messages which were super easy to understand.

After 10 minutes, the project was fully replaced with Parcel v2. Isn't that incredible?! Seriously, I was telling myself that this could never be possible. I mean - how could you replace days of work setting up my custom Webpack configurations and then simply replace it with a new module bundler called Parcel...? Well, it worked. Incredible and awesome.

Automatic Image Optimization with production builds.

Believe it or not, we are now at this awesome point in time where the build tool is able to let you declare a HTML element with multiple image sources (including AVIF images) and it will automatically optimize them when you run the production build command. This is insane. I previously had to manually setup a gulp workflow with imagemin and other complexities which I really had trouble with most of the time because you kind of never remember what you did in previous projects to set this up. Parcel v2... simply declare your HTML, put the original image in your project's preferred folder, run a command. Done.

Smaller Javascript and CSS minified bundles than with my previous Webpack v5 setup.

Not only is it extremely handy, fast and enjoyable - it also produced ~10kb less of total shipped Javascript and CSS. Then if you also count the automatic image optimizations which took another ~10kb off my previous images. That is around 20kb less shipped code in the production build with zero real efforts on my side.

Automatic caching helpers with file names hashing.

Parcel will reorganize your file names in production builds so that they include a hash like this index.f7b8de4d.js. This helps to cache those files for a very long time without worrying that you users will get old cached results. In fact, by hashing your file names, each production build that modified a file's content will generate a new hash which automatically invalidates the cache and ensure your users get the latest content you wanted to provide to them. That's awesome too.

Conclusion

So, I found that Parcel v2 provides out-of-the-box ideal modern default configurations for my web development needs. I am not affiliated with Parcel in any way. I just discovered it the day it was released publicly on Twitter.

Maybe you could try it and be as impressed as I am today. Honestly, when you spend hours, days, months, years searching for something and then you finally find it, it's an extremely satisfying feeling.

Thanks to all contributors in the Parceljs.org project. This new release is my new go to build tool for starting new projects.

Disclaimer 1: For purely React based projects I will keep using Next.js because its extremely good at it (and built especially for it).

Disclaimer 2: I did my tests on a MacBook Air M1 which greatly influenced the general speed of build times compared to my Windows machine.

Using Lodash Debounce with React Hooks for an Async Data Fetching Input or use a Custom Hook.

Alexandre Desroches — Tue, 17 Aug 2021 03:31:05 +0000

TLDR; Link to code example that integrates Lodash Debounce within a React function component:

https://codesandbox.io/s/react-debounced-data-fetching-input-630jk?file=/pages/index.js

Link to example code with useDebounce custom hook (no lodash dependency - Thanks to jackzhoumine for posting this idea in the comments):
https://codesandbox.io/s/react-debounced-data-fetching-input-630jk?file=/pages/with-use-debounce-custom-hook.js

An Autocomplete input with React - it was supposed to be simple.

I recently applied for a React Developer job at a big gaming company. They required me to pass an online coding challenge which was to build an Autocomplete component in React.

The requirements were something like that:

Fetch data on a server to get matches with the user's input.
Delay the fetching function by 500 ms after user has stopped typing with Lodash Debounce.
Render a Suggestions List component when there are matches with the user input.

Surely, an autocomplete is not the easiest task, but I never thought the hardest part would be using Lodash's debounce.

Well, it was much more complex than I expected...

It turns out that after 1 full hour, I still could not get the Lodash's Debounce part to work within my React component. Sadly, my maximum allowed time expired and my challenge failed.

Perfect opportunity to improve with React's mental model.

Rather than feeling bad because of a sense of failure, I took that motivation to read about "How to use Lodash debounce with React Hooks", and then I made a CodesandBox to share what I learned.

1. Using useMemo to return the Debounced Change Handler

You can't just use lodash.debounce and expect it to work. It requires useMemo or useCallback to keep the function definition intact between rerenders.

Once you know that, it seems easy.



import { useEffect, useMemo, useState } from "react";
import debounce from "lodash/debounce";

// References:
// https://dmitripavlutin.com/react-throttle-debounce/
// https://stackoverflow.com/questions/36294134/lodash-debounce-with-react-input
// https://stackoverflow.com/questions/48046061/using-lodash-debounce-in-react-to-prevent-requesting-data-as-long-as-the-user-is
// https://kyleshevlin.com/debounce-and-throttle-callbacks-with-react-hooks

// Sandbox Link:
// https://codesandbox.io/s/react-debounced-data-fetching-input-630jk?file=/pages/index.js

const API_ENDPOINT = "https://jsonplaceholder.typicode.com/todos/1";
const DEBOUNCE_DELAY = 1500;

export default function Home() {
  const [queryResults, setQueryResults] = useState(null);
  const [isDebounced, setIsDebounced] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const debouncedChangeHandler = useMemo(
    () => debounce((userInput) => fetchQuery(userInput), DEBOUNCE_DELAY),
    []
  );

  // Stop the invocation of the debounced function after unmounting
  useEffect(() => {
    return () => {
      debouncedChangeHandler.cancel();
    };
  }, [debouncedChangeHandler]);

  function handleUserInputChange(event) {
    const userInput = event.target.value;
    debouncedChangeHandler(userInput);
    setIsDebounced(true);
  }

  function fetchQuery() {
    setIsDebounced(false);
    setIsLoading(true);

    fetch(API_ENDPOINT)
      .then((res) => res.json())
      .then((json) => {
        setQueryResults(json);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err);
        setIsLoading(false);
      });
  }

  const DisplayResponse = () => {
    if (isDebounced) {
      return <p>fetchQuery() is debounced for {DEBOUNCE_DELAY}ms</p>;
    } else if (isLoading) {
      return <p>Loading...</p>;
    } else if (error) {
      return <pre style={{ color: "red" }}>{error.toString()}</pre>;
    } else if (queryResults) {
      return (
        <pre>
          Server response:
          <br />
          {JSON.stringify(queryResults)}
        </pre>
      );
    }
    return null;
  };

  return (
    <main>
      <h1>
        With <em>Lodash</em> Debounce
      </h1>
      <a href="/with-use-debounce-custom-hook">
        Try with useDebounce custom hook instead
      </a>
      <div className="input-container">
        <label htmlFor="userInput">Type here:</label>
        <input
          type="text"
          id="userInput"
          autoComplete="off"
          placeholder={"input is delayed by " + DEBOUNCE_DELAY}
          onChange={handleUserInputChange}
        />
      </div>
      <DisplayResponse />
    </main>
  );
}

For the full code example of using Lodash's Debounce with a React function component, please try the Codesandbox dev environnement which I built upon a Next JS starter template at this URL:
https://codesandbox.io/s/react-debounced-data-fetching-input-630jk?file=/pages/index.js

2. Use a Custom React Hook to debounce fetching



import { useEffect, useState } from "react";

// References:
// https://dev.to/jackzhoumine/comment/1h9c8

// CodesandBox link:
// https://codesandbox.io/s/react-debounced-data-fetching-input-630jk?file=/pages/with-use-debounce-custom-hook.js

const API_ENDPOINT = "https://jsonplaceholder.typicode.com/todos/1";
const DEBOUNCE_DELAY = 1500;

export default function DebouncedInput() {
  const [queryResults, setQueryResults] = useState(null);
  const [isDebounced, setIsDebounced] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const [didMount, setDidMount] = useState(false);
  const [userInput, setUserInput] = useState(null);
  const debouncedUserInput = useDebounce(userInput, DEBOUNCE_DELAY);

  useEffect(() => {
    if (!didMount) {
      // required to not call API on initial render
      //https://stackoverflow.com/questions/53179075/with-useeffect-how-can-i-skip-applying-an-effect-upon-the-initial-render
      setDidMount(true);
      return;
    }
    fetchQuery(debouncedUserInput);
  }, [debouncedUserInput]);

  function handleUserInputChange(event) {
    setUserInput(event.target.value);
    setIsDebounced(true);
  }

  function fetchQuery(debouncedUserInput) {
    setIsLoading(true);
    setIsDebounced(false);

    console.log("debouncedUserInput: " + debouncedUserInput);

    fetch(API_ENDPOINT)
      .then((res) => res.json())
      .then((json) => {
        setQueryResults(json);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err);
        setIsLoading(false);
      });
  }

  const DisplayResponse = () => {
    if (isDebounced) {
      return <p>fetchQuery() is debounced for {DEBOUNCE_DELAY}ms</p>;
    } else if (isLoading) {
      return <p>Loading...</p>;
    } else if (error) {
      return <pre style={{ color: "red" }}>{error.toString()}</pre>;
    } else if (queryResults) {
      return (
        <pre>
          Server response:
          <br />
          {JSON.stringify(queryResults)}
        </pre>
      );
    }
    return null;
  };

  return (
    <main>
      <h1>
        With <em>useDebounce</em> custom hook
      </h1>
      <a href="/">Try with Lodash Debounce instead</a>
      <div className="input-container">
        <label htmlFor="userInput">Type here:</label>
        <input
          type="text"
          id="userInput"
          autoComplete="off"
          placeholder={"input is delayed by " + DEBOUNCE_DELAY}
          onChange={handleUserInputChange}
        />
      </div>
      <DisplayResponse />
    </main>
  );
}

function useDebounce(value, wait = 500) {
  const [debounceValue, setDebounceValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebounceValue(value);
    }, wait);
    return () => clearTimeout(timer); // cleanup when unmounted
  }, [value, wait]);

  return debounceValue;
}

For the full code example of using useDebounce Custom React Hook, please try the Codesandbox dev environnement which I built upon a Next JS starter template at this URL:
https://codesandbox.io/s/react-debounced-data-fetching-input-630jk?file=/pages/with-use-debounce-custom-hook.js

Credits:

Credits all go to other smarter people which I referenced in the file's comments. These are more complete articles which will be able to give you a better perspective about the challenge.

That said, I feel like sleeping after all this. But as always, learning with real challenges is best. Keep up the good work. Cheers.

Alex