DEV Community: Alfonsina Lizardo

Desbloqueando el crecimiento profesional: El poder de compartir conocimiento y participar en comunidades

Alfonsina Lizardo — Wed, 24 Jan 2024 15:23:35 +0000

Introducción

Mi historia de como me convertí en Desarrolladora de Software es un poco particular. Como muchos, estudie algo no relacionado inicialmente, lo particular es que yo vengo del mundo de la salud, específicamente medicina, y aún no conozco al primer médico que haya cambiado de carrera aparte de mi 😅 Si lo eres o conoces a otro médico que haya hecho este cambio, dímelo, me encantaría conocerle 💜

Foto de mi graduación en el 2012 con mis padres 💜

Desde niña me gustaba la tecnología, es por eso que cuando me di cuenta de que al parecer me había equivocado de carrera y que medicina no era lo mío, una de las primeras cosas en las que pensé fue en aprender a programar. No fue sencillo pero al final pude entrar a este mundo a través de un bootcamp, mucho estudio por mi cuenta y gracias al networking 💜

Durante el último año me atreví a empezar a compartir mi conocimiento y participar de forma más activa en comunidades y en este artículo quiero compartir mi experiencia y ojalá motivar a los que me lean a también participar 🙂

De codear en solitario a prosperar en comunidad

Personalmente me considero una persona introvertida, siempre me ha costado participar en situaciones donde no conozco a nadie 😅 cuando empecé a interesarme en el desarrollo de software me uní a distintas comunidades en Facebook, Slack y Discord, pero en modo stalker 🕵🏼‍♀️ leyendo todo lo que decían pero sin participar porque sentía que realmente no tenía nada que aportar 😅

Me animé a participar cuando alguien dijo que tenía un grupo de estudio para aprender programación 👀 así que con muchos nervios pedí más información al respecto, y así fue como conocí a mi primer amigo en el mundo de la programación 💜 quién me ayudó muchísimo a guiarme, me recomendó recursos para estudiar por mi cuenta, el orden en que estudiar ciertas cosas, etc.

Con esa experiencia, y otras parecidas que viví posteriormente, me di cuenta de que en el mundo del desarrollo de software, la comunidad y las personas que te encuentras generalmente son muy amigables y dispuestas a compartir su conocimiento para ayudar a mejorar a otros, eso la verdad fue sorprendente para mi porque no me había conseguido con eso en otras áreas, y la verdad me gustó muchísimo.

Es por eso que a medida que fue aumentando mi conocimiento me animaba cada vez más a participar en dichas comunidades, compartía opiniones y también conocimiento en caso de que alguien preguntara algo que yo supiera responder. Sentía que, con lo que sabía en ese momento, quería ayudar a quien pudiera asi como muchos otros ya me habían ayudado a mi 😄

Compartir conocimiento eleva tus habilidades

En mi vida académica siempre disfrutaba el enseñar a los demás, incluso en los bootcamps que he hecho siempre me ha gustado compartir mi conocimiento, pero más en forma de tutoría individual que dar una clase, charla o taller, ya que me daba terror hablar en público 😱.

Además, pensaba que para compartir conocimiento de forma pública (creación de contenido, dar charlas, etc) primero debía ser una experta en el tema que quería compartir, y eso junto al temor de hablar en público, me impedían el atreverme a empezar a hacerlo.

Pero en el último año conocí a alguien, quien ahora se convirtió en una muy buena amiga 💜 que desmintió mis creencias, y me lo demostró con hechos, ya que ella llevaba casi el mismo tiempo que yo como desarrolladora de software y ya estaba compartiendo sus conocimientos dando charlas, siendo mentora, participando en comunidades.

En ese momento pensé “quiero ser como ella, si ella puede ¡yo también!” 🔥 pero bueno aún me daba miedo hablar en público 😅 así que empecé de a poco en algo que me sentía más cómoda, primero empecé a compartir temas de desarrollo por LinkedIn, y luego unos amigos me animaron a hacerlo por Instagram y Threads.

Me di cuenta que compartiendo conocimiento de esa manera ¡también aprendía un montón! porque debía investigar y entender muy bien el tema para poder comunicarlo de una forma clara y concisa, la mejor forma de aprender, o de afianzar tus conocimientos, es enseñar 🚀 y siempre habrá alguien a quien le ayude lo que tu sabes y quieres enseñar.

Y lo confirmé aún más cuando también empecé a escribir artículos técnicos acá en Dev.to (gracias a mi mentora que me animó a hacerlo 💜). Mis 2 primeros artículos tuvieron muy buen recibimiento, y según yo eran de algo relativamente sencillo, pero lo que era “sencillo” para mi, quizás no lo era tanto para otros.

En algún lado leí:

No importa si lo que quieres explicar o enseñar ya lo han explicado un montón de veces distintas personas, tal vez tu forma de explicarlo sea distinta y eso ayude a otras más

Mi viaje hacia hablar en público

¿Ya dije que me daba pánico hablar en público no? ¡Pero verdadero pánico! 😱 mucha taquicardia, y hasta el punto de quedarme paralizada 😧 Fue muy difícil para mi superar ese miedo (aún me da miedo, pero mucho más manejable 😅) ¿Cómo lo hice? de nuevo, empezar de a poco, mi primera charla fue online, pregrabada y cortita de 5 minutos sobre mi cambio de carrera, en un evento llamado Dev Day 4 Women.

A pesar de que era grabada, antes de grabarla me sentía muy nerviosa, pero luego de hacerlo me sentí feliz de haberlo logrado 😄 luego el día del evento, cuando pasaron la charla, de nuevo me sentía nerviosa porque ahora si la gente la iba a ver 😮 pero todo salió bien, y tuvo buen recibimiento 😍

Luego di otro pasito, di una charla sobre el mismo tema pero esta vez de 30-40 minutos, en vivo, online, y fue para la comunidad de Mermelada Tech (pueden ver la charla acá). De nuevo super nerviosa en la previa, pero ya dando la charla me fui soltando y poco a poco se me fueron los nervios.

La 3ra charla fue más inesperada 😅 fui a un evento llamado 9punto5, y el último día del evento dieron espacio para dar Lightning Talks de 5 minutos a cualquier participante del evento 👀 asi que me atreví no más, y bueno como no tenía nada preparado, hablé nuevamente sobre mi cambio de carrera (puedes ver todas las Lighning Talks del evento: acá).

¡Esta vez estaba demasiado nerviosa! temblando incluso, pero respiré y me subí al escenario 😱 Por dentro estaba muerta de miedo, pero para mi sorpresa, luego de dar la charla, varios me felicitaron y me dijeron que no se notó, y que lo había hecho muy bien 😍. No voy a mentir, eso me subió muchísimo el autoestima 💜 y me sentí genial, quería hacerlo de nuevo! esta vez con un tema más técnico.

Y así fue como entonces di un taller para la comunidad de JavaScript Chile, sobre construir una aplicación relativamente sencilla en React, habían nervios, pero más manejables.

Además, postulé una charla a Nerdearla v101 sobre buenas prácticas en React y, a los días de haber dado el taller, recibí la gran noticia de que mi charla había sido seleccionada 😱 (puedes verla acá). Tenía una mezcla de emoción y miedo al mismo tiempo. Cuando llegó el momento, estaba nerviosa pero lo pude manejar, primero porque ya no era mi primera charla, y segundo porque me había preparado un montón y además, era sobre algo que pongo en práctica casi todos los días 👩🏼‍💻

Ahí fue que me di cuenta de algo, la principal razón de mi miedo al hablar en público, era el miedo a equivocarme, el miedo a no saber explicar o responder algo y quedar expuesta 🙃 pero entonces también me di cuenta que es un miedo algo irracional, porque todos somos humanos y todos nos equivocamos, y además, es imposible saberlo todo.

Una de las enseñanzas del último año es que no hay que dejar de hacer las cosas por el miedo a equivocarse, como diría otra gran amiga 💪🏼

“si tienes miedo ¡hazlo con miedo!”

Impacto de la comunidad y el networking

Mi círculo profesional y personal ha crecido mucho gracias al hecho de atreverme a involucrarme de forma más activa en comunidades, lo cual abre un montón de oportunidades, tanto en tu carrera profesional como en tu crecimiento personal.

Un par de ejemplos:

Ya les conté mi historia sobre como terminé el año pasado dando una charla en Nerdearla 🔥 lo que no dije es que la comunidad de JavaScript Chile jugó un rol importante en ello, entre varios nos animamos a postular charlas, y para nuestra grata sorpresa, muchos quedamos seleccionados 🚀 Durante el evento entre todos nos apoyamos, asistiendo a las charlas de los otros, haciendo barra, demostrando el apoyo. Para mi, fue una experiencia mágica ✨ nunca había disfrutado tanto un evento 💜 y el haber sido speaker en ese evento ayudó muchísimo a mi crecimiento personal. Si pude dar una charla frente a tantas personas, puedo hacer lo que sea 💪🏼 (o tal vez no, pero así se siente 🤣)

Nunca había participado en una hackathon porque pensaba que no sabía lo suficiente, pero el último año participé en 2 junto a personas que conocí en la comunidad de JavaScript Chile, en una quedamos de 3er lugar y la otra la ganamos! 🤩 ¡en ambas aprendí muchísimo! Participar en hackathones es como entrar por un corto tiempo a la habitación del tiempo y salir super poderoso 💪🏼 sin el apoyo de la comunidad probablemente nunca me hubiera atrevido a participar en ninguna, y me hubiera perdido de esas maravillosas experiencias ✨

Además gracias a las muchas personas que he conocido en comunidades han surgido oportunidades de participar en diversas actividades, como streams, talleres, podcasts, organización de eventos, hasta incluso ofertas laborales 💼

Conclusión

En la vida, todo es una cadena, en mi caso todo empezó con atreverme a hablarle por LinkedIn a una persona que me inspiró y me ha motivado un montón desde entonces, eso me llevó a hablarle a otras, a participar más, a motivarme y atreverme a compartir mi conocimiento y a la vez aprender yo también en el proceso y conocer incluso más personas maravillosas 💜

Apóyate en las comunidades, como mencioné, en tecnología a todos, o a la gran mayoría, nos encanta compartir nuestro conocimiento y siempre estaremos allí para ayudarte y apoyarte.

Si hay algo que me dejó como aprendizaje todo lo que viví el último año es: No dejes que el miedo te detenga. Si hay algo que de verdad quieres hacer ¡Atrevete!, y, cito nuevamente a mi amiga, si tienes miedo ¡hazlo con miedo! 🔥🚀

#DEVResolutions2024

Alfonsina Lizardo — Wed, 03 Jan 2024 12:31:26 +0000

Professional Goals:

Goal: Give an international tech talk.
Action Steps: Apply for as many CFPs as possible.
Timeline: It can literally be at any moment during the whole year.

DEV Community Contributions:

Contribution Goal: Write an article per month or at least one every 2 months.
Collaboration Plans: Some of those articles have to be for the JavaScript Chile community.

🌟 #DEVImpact2023 Reflections

Alfonsina Lizardo — Fri, 22 Dec 2023 20:23:08 +0000

Proud Moments

My most proud moment this year was participating as a speaker in an international event here in Latin America called Nerdearla.

And what makes it so special for me is that I've always felt really anxious about public speaking, I barely started giving talks this year, so this was a HUGE thing for me 😊

DEV Contributions

I actually started being more active in dev.to this year by starting to write articles 🙂 I always thought you needed to be an expert at something to write about it, but that's totally not the case.

I haven't written a new article in a few months though (I blame life (?)) 😅 I hope to to start again in January.

Brilliant Fails

My most significant challenge was to get over my introvert self. There was also a time this year where I felt a little stuck in my dev career, I felt I lacked motivation to continue, or maybe it was the uncertainty of not knowing how to keep growing.

But thanks to my mentor and some friends I was able to get over all that 💜

Celebrate the Numbers

Not bad for my first year writing some posts 😄

Shoutouts

I'd specially like to give a shoutout to the JavaScript Chile community whose members have helped me a lot through my development journey this year 🥰

Future Goals

My goals for next year are giving more international talks, maybe my first talk in english 👀🙈 Another goal is to write at least a blog post every 1 or 2 months. And finally to continue to grow as a developer and helping others to grow as well by participating in the community 💜

What Does DEV Means to You?

Even though I barely started writing articles last year, I've been in DEV since starting my tech career a little over 4 years ago. I remember reading articles on my phone while going to work on the subway.

For me, DEV is an awesome place where I can share my knowledge and also learn from others 💜

Building a Custom Hook in React: Executing Actions on Specific Window Resizes

Alfonsina Lizardo — Mon, 25 Sep 2023 14:18:43 +0000

1. Introduction
2. Prerequisites
3. Setting Up the Project
4. Building the Custom Hook Step by Step
       4.1. Creating the hook
       4.2. Handling the Resize Event
       4.3. Adding Debounce for Performance
5. Using the Custom Hook
6. Conclusion

1. Introduction

In the world of frontend development with React, creating reusable and efficient components is key to building successful and maintainable applications.

One scenario that you can encounter is the need to trigger specific actions based on the size of the browser window. In this tutorial, we'll delve into the process of building a custom hook in React that allows you to execute actions when the window is resized to certain sizes.

By the end of this guide, you'll not only have a powerful custom hook at your disposal but also a deeper understanding of hooks and their implementation. So let's get to it! 🙌🏼

A reminder on custom hooks…

Custom hooks in React are reusable functions that allow you to extract common logic from your components and share it across your application, thus avoiding code repetition.

They are named with the use prefix, and they can be used to encapsulate any kind of functionality, such as managing state, fetching data, or handling side effects.

2. Prerequisites

Before we dive into building our custom hook, let's make sure we have the necessary tools and knowledge in place:

Basic understanding of React hooks, particularly the useEffect hook (You can read this other article of mine if you need a refresher 🙂)
Node.js and npm (Node Package Manager) installed on your system.

3. Setting Up the Project

To get started, let's set up a new React project 🙌🏼 or you can also use an existing one where you want to implement the custom hook. We're going to create one from scratch for the purposes of this guide.

Open your terminal and run the following commands:

npm create vite@latest window-resize-hook-demo -- --template react
cd window-resize-hook-demo
npm run dev

This will create a new react project with Vite and run it, feel free to change the name if you want to 🙂

4. Building the Custom Hook Step by Step

4.1 Creating the hook

Create a “hooks” folder in the “src” folder and inside it create a file called “useWindowResize.jsx”. Technically you can place the hook wherever you want and call it whatever you want, but it's good practice to do it like this!

In the new file, let’s create our function:

export const useWindowResize = (callback, screenSize) => {
  // Hook implementation
};

The useWindowResize hook will take 2 parameters:

callback: The function that you want to execute when the window size falls outside the specified range.
screenSize: An object containing minWidth and/or maxWidth properties, we'll use them to define the range of window sizes outside of which the callback will be triggered.

4.2 Handling the Resize Event

The first step is to handle the window resize event and check whether the current window size falls outside the specified range:

import { useEffect } from 'react';

export const useWindowResize = (callback, screenSize) => {
  const { minWidth, maxWidth } = screenSize;
  useEffect(() => {
    const handleResize = () => {
      if (
        (typeof maxWidth !== "undefined" && window.innerWidth > maxWidth) ||
        (typeof minWidth !== "undefined" && window.innerWidth < minWidth)
      ) {
        callback();
      }
    };

    // add event listener
    window.addEventListener("resize", handleResize);

    // cleanup function
    return () => {
      // remove event listener
      window.removeEventListener("resize", handleResize);
    };
  }, [callback, maxWidth, minWidth]);
};

In this step, we add the useEffect hook because we have to add the resize event listener to the window object so that we can determine when to execute our callback function.

We do it inside the useEffect hook because then we can add a cleanup function to remove the event listener once the component where the custom hook is called is unmounted, otherwise the event listener will continue to be added to the window object, leading to memory leaks and/or unexpected behaviors.

We define the handleResize function inside the useEffect , which will be called when the event listener is triggered, that is, when the window is rezised. This function checks if the current window width is outside the specified range, if it is, the provided callback function is executed.

Notice that we check if the maxWidth and minWidth are undefined, so we can make those properties optional, this way you can either pass them both or just one of them. For example, if you only pass the maxWidth, then the callback will only execute when the window width is higher than the maxWidth.

We also add callback, maxWidth and minWidth to the useEffect dependency array, because if, for any reason, they change, we want the code inside the useEffect to run again to adapt to the new values.

4.3 Adding Debounce for Performance

To enhance the performance of our custom hook, we can add a debounce mechanism to the resize event listener. Debouncing prevents the callback from being executed too frequently during rapid resizing, leading to smoother performance.

We'll use the lodash.debounce library for this purpose, that way we don’t have to install the complete lodash library just for this functionality, or if you have a project that’s already using lodash, no need to install this one.

First, install the library by running the following command:

npm install lodash.debounce

Now, import the debounce function and use it to wrap the handleResize function:

import { useEffect } from 'react';
import debounce from 'lodash.debounce';

export const useWindowResize = (callback, screenSize) => {
  const { minWidth, maxWidth } = screenSize;
  useEffect(() => {
    // wrap it here
    const handleResize = debounce(() => {
      if (
        (typeof maxWidth !== "undefined" && window.innerWidth > maxWidth) ||
        (typeof minWidth !== "undefined" && window.innerWidth < minWidth)
      ) {
        callback();
      }
    }, 300);

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [callback, maxWidth, minWidth]);
};

In this case I established a 300ms delay. This means that when the window is resized, it will wait for 300ms after the last window resize event to call the handleResize function, that way we improve performance given that the function won’t be called on every second/milisecond that the window is being resized, only when it stops being resized for at least 300ms (Hopefully that made sense 😅).

5. Using the Custom Hook

With our custom hook useWindowResize now fully developed, it's time to put it to use in our React components. Import the hook into any component where you want to trigger specific actions based on window resize events:

import { useWindowResize } from "./hooks/useWindowResize";

function App() {
  const handleWindowResize = () => {
    // Perform your desired actions here
    console.log("Window resized outside the specified size range");
  };

  useWindowResize(handleWindowResize, { minWidth: 768, maxWidth: 1024 });

  return (
    <>
      {/* Your component's content */}
    </>
  );
}

export default App;

In this example, the handleWindowResize function will be executed whenever the window width falls outside the range of 768 to 1024 pixels.

You might be wondering, what’s an example situation where I might need this? 🤔 Imagine you have a page that shows a list of products and a list of filters.

On mobile window sizes, the filters are shown on a modal when the user clicks a button, but on desktop there’s no button because the filters are shown by default on the page (not on a modal).

You might think you can handle it with just CSS, show the button that opens the modal on mobile and hide it on desktop, easy peasy ✨ But what if (and I know that this is an unlikely situation, but it could happen) an user on desktop resizes the window to a mobile size, opens the modal and then resizes it back to desktop?

The button won’t show but the modal will still be open, so with the hook you could simply call a function to close the modal on desktop size and it’ll work like a charm 🙌🏼

And besides solving the issue you know have a reusable hook that you can use anywhere else in the project where you need a similar functionality 👩🏼‍💻

6. Conclusion

Congratulations! You've successfully built a powerful custom hook in React that enables you to execute actions when the window is resized to certain sizes. By encapsulating this functionality in a custom hook, you've created a reusable and modular piece of code that can enhance the user experience of your applications 🚀

If you have any other examples on where you could find this custom hook useful or if you have any feedback, feel free to leave a comment! 😄

Happy coding! 🤘🏼

Leveraging the Power of CSS Modules and the "Classnames" Package in React

Alfonsina Lizardo — Fri, 21 Jul 2023 19:50:42 +0000

Introduction
The issue with using global styles
What are CSS Modules and why use them?
What is the classnames package and how to use it?
Classnames and CSS Modules Integration
- Bind version
- No Bind version
Conclusion

Introduction

As software developers, we constantly strive to build maintainable code, and using CSS modules and the “classnames” package for styling your React application is a great way to do that.

If you’re a beginner React developer you’ve probably tried using a global stylesheet for your CSS or maybe even sass with the 7-1 pattern or something alike, while that’s certainly an option, we’ll look at the downsides of it and the advantages of using CSS modules and/or the “classnames” package instead, which are both powerful tools that can enhance the development process and improve the organization of styles in React applications.

So in this article, we will explore how to use them to achieve modular and maintainable styling in React.

The issue with using global styles

As mentioned above, one common approach to styling React components is through the use of global stylesheets. While this method may suffice for smaller projects, it becomes challenging to manage as the codebase grows, and that’s when you may encounter some issues.

The main issue has to do with scope and specificity, since global stylesheets can lead to naming conflicts and specificity issues when different components use the same class names.

It may be easy to avoid components using the same class names when the project is small but it becomes a nightmare to maintain when it’s a big project and several developers are working on it. It’s challenging to isolate and manage styles for individual components, leading to unexpected visual discrepancies.

The same applies when using sass with the 7-1 pattern or even having each component along with its styles file in its own folder.

It could happen for example that there’s a component which has a container-box class name, and you’re requested to build some new functionality and you create a component and use the same class name (without knowing the class already exists) in your component with your own styles, depending on the build process either your component styles or the ones for the component that already existed will be overwritten.

That’s when CSS modules come to the rescue ✨

What are CSS Modules and why use them?

CSS modules provide a solution to the problems associated with global stylesheets, it’s a popular approach to scoping CSS styles locally, ensuring encapsulation and eliminating naming conflicts by creating an unique class name for each component, which promotes modularity and makes CSS code much easier to maintain and refactor.

Besides that, by using CSS modules, the styles will be co-located with their corresponding components, which makes it easier for developers to understand and modify styles without worying about affecting other parts of the application.

To use CSS Modules in a React project, you need to set up the necessary build tools, but this tipically is preconfigured out of the box with most of the tools used currently to start a React application, such as Vite, NextJS or Gatsby, even create-react-app (although it’s no longer recommended to use CRA for your React projects), which makes the setup process seamless.

You’re probably thinking by now (I hope 😅) “Ok, enough convincing, how do I use them? 👀” well, fortunately it’s extremely easy!

Let’s say you have a Button.jsx component, in the src/components/Button folder, to use CSS modules, simply create a regular CSS file in the same folder and add .module.css extension to it, for example button.module.css (technically you can call it anything you want but I find it a better practice to name it the same as your component), and it also works with sass/scss, just change .css for .scss/.sass.

Next, add the desired class styles to your CSS file, for example:

.btn {
  cursor: pointer;
  border: none;
}

And then you import the CSS module in your React component and use it as such:

// SwitchButton.jsx
import styles from './button.module.css';

const SwitchButton= () => {
  return <button className={styles.btn}>Click me</button>;
}

That’s it! the build process will replace the CSS class with an unique name similar to this _btn_1411r_23, so if you or another developer, by any chance, add a new .btn class in another component, the build process will add an unique id to it so neither of the styles will be overwritten 🙌🏼

CSS modules also allow you to dynamically assign classes, which is great! but, it also has a bad side, which is that if you need to add multiple classes, it can get pretty wordy, especially if you’re also conditionally adding classes, for example:

// SwitchButton.jsx
import styles from './button.module.css';

const SwitchButton = ({ isDisabled, border, type }) => {
  return (
    <button 
      className={`
        ${styles.btn}
        // Dynamic class
        ${styles[type]}
        // Conditional classes
        ${isDisabled ? styles.isDisabled : ''}
        ${border ? styles.border : ''}
      `}
    >
      Click me
    </button>
  )
}

And that’s where the 'classnames' packages can help us! 🙌🏼

What is the classnames package and how to use it?

The Classnames package is a utility library that provides a convenient way to conditionally apply CSS classes to elements. It simplifies the process of conditionally styling components based on different states or props.

To use the Classnames package, you first need to install it with npm install classnames and then you simply import it in the component where you wish to use it. First, let’s see an example on how to use it by itself, without CSS modules, here’s the previous example, using classnames:

// SwitchButton.jsx with Classnames and without CSS modules
import classNames from 'classnames';
import './button.css';

const SwitchButton = ({ isDisabled, border, type }) => {
  return (
    <button 
      className={classNames('btn', type, {
        'active': isDisabled,
        border
      })}
    >
      Click me
    </button>
  )
}

You can see that we passed a string, then a dynamic class based on the type prop and then an object where we place our conditional classes.

In the object the key represents the name of the class and the value represents the conditional, so in this case the class is “active” and it will only be applied if isActive is true.

You can pass any conditional here, it doesn’t necessarily have to be a variable or a prop, the conditional could be type === 'success' for example. And just like any object, you can also omit the value if the value an the key have the same name, as in the case of “border”.

This is much better right? much less wordy. You might say “of course it’s better, we’re not using CSS modules, it’d be less wordy too if we used regular CSS”, well actually no 😅 you’ll see later that we can get almost the same result using CSS modules, and it’s definitely less wordy than handling the conditional classes with regular CSS:

// SwitchButton.jsx without Classnames and without CSS modules
import './button.css';

export const SwitchButton = ({ isDisabled, border, type }) => {
  return (
    <button 
      className={`
        btn
        ${type} 
        ${isDisabled ? 'active' : ''}
        ${border ? 'border' : ''}
      `}
    >
      Click me
    </button>
  )
}

So handling classes with “classnames” is still a great choice if you’re not using CSS modules, but using only the package does not solve the original issue of class naming conflicts, so let’s see how we can implement “classnames” along with CSS Modules and get the best of both worlds ✨

Classnames and CSS Modules Integration

There are 2 ways in which we can do this, I find the first one much better than the second, but we’ll see both in case you can’t use the first one for whatever reason.

1. Bind version

Let’s see the code first:

import styles from "./button.module.css";
// import from classnames/bind
import classNames from 'classnames/bind'

// bind the styles to classNames
const cx = classNames.bind(styles);

export const SwitchButton = ({ isDisabled, border, type }) => {
  return (
    <button
      /* use them almost as if you were using */
      /* a regular/global CSS stylesheet */
      className={cx('btn', [type], {
        'active': isDisabled,
        border
      })}
    >
      Click me
    </button>
  );
};

This is what I meant by getting almost the same result by using classnames + CSS modules as if we were using global styles. As you can see here, there are only some few changes that we need to do (as stated in the comments in the code), but the end result is great, much more concise than using only CSS modules.

2. No Bind version

Again, let’s see the code first:

import styles from "./button.module.css";
// import classNames as if not using CSS modules
import classNames from 'classnames' 

export const SwitchButton = ({ isDisabled, border, type }) => {
  return (
    <button
      /* use the classes by accessing them through */
      /* the styles object */
      className={classNames(styles.btn, [styles.type], {
        [styles.active]: isDisabled,
        [styles.border]: border
      })}
    >
      Click me
    </button>
  );
};

You probably can see why I prefer the previous way, this one is less concise since we need to apply the styles by accessing the “styles” object, as we first saw when using CSS modules, but I’ve worked in some projects where the first way hasn’t worked for me (probably due to environment or compiling configurations) so I’ve had to settle with the second 😅

Conclusion

In this article, we have explored the usage of CSS Modules and the Classnames package in React. We have seen how CSS Modules provide local scoping and better organization of styles, while the Classnames package simplifies conditional styling. By leveraging these tools, you can enhance readability, maintainability, and scalability, allowing for a better development experience.

I hope the article was useful for you 🙌🏼 and if you have any questions please feel free to leave them in the comments below. Happy coding! 🤘🏼

Building a Real-Time Search Filter in React: A Step-by-Step Guide

Alfonsina Lizardo — Mon, 19 Jun 2023 16:46:54 +0000

1. Introduction
2. Requirements
3. Step 1: Setting Up the Project
4. Step 2: Creating the Input
5. Step 3: Rendering the list of items
6. Step 4: Building the filtering functionality
7. Step 5: Getting the items from an API and filtering them
8. Step 6: Refactoring a little (Bonus)
       8.1. ItemList Component
       8.2. Input Component
       8.3. API call
9. Conclusion

Introduction

When I began working with React, one of the common challenges I encountered was implementing a real-time search filter functionality. This feature updates the displayed items as the user types and shows all the items again if the search filter is empty. So in this tutorial, I will guide you through the steps to create this feature in React. We'll start with a list of hard-coded items and then proceed to a list of items obtained from an API.

By the end of this tutorial, you'll have a solid understanding of how to build this valuable feature. We’ll begin by implementing the complete functionality in App.jsx and then refactor it into reusable components.

Let's get started!

Requirements

Npm and Node.js installed
Basic React Knowledge

Step 1: Setting Up the Project

To set up the project, we will be using Vite. So open your terminal and execute the following commands:

npm create vite search-filter --template react

Feel free to replace “search-filter” with any name you prefer for your project. This should be enough to create the project. However, if you come across any options in your command-line interface, make sure to select “React” when prompted to choose a framework, and “Javascript” when asked to select a variant.

Now, navigate into the project directory and install the required packages by executing the following commands:

cd search-filter
npm install

After that, you can run the command npm run dev. You should be able to open the project at http://localhost:5173/ and see something like this:

Step 2: Creating the Input

Now, open the project in your preferred IDE (I personally use VSCode), and navigate to the src/App.jsx file. Delete its contents to start with a clean slate. If you prefer to work without the default styles, you can remove the import './index.css' line from the src/main.jsx file. You may also choose to leave it intact if you want to keep the default styles. In my case, I will remove it.

We’ll begin by building the entire functionality within App,jsx, and we can refactor it later into reusable components.

First let’s create our search input with its proper state to control its value:

// src/App.jsx
import { useState } from 'react'

function App() {
  const [searchItem, setSearchItem] = useState('')

  const handleInputChange = (e) => { 
    const searchTerm = e.target.value;
    setSearchItem(searchTerm)
  }

  return (
    <div>      
      <input
        type="text"
        value={searchItem}
        onChange={handleInputChange}
        placeholder='Type to search'
      />
    </div>
  )
}

export default App

With this, we have implemented a functional input. We’re setting its value to the searchItem state, which updates whenever the user types in the input thanks to the onChange event handler. We could simply use the setSearchItem function directly in the input, but we’re doing it like this because we’re adding some more functionality to the handler function soon.

You should have something like this:

Step 3: Rendering the list of items

Next, let’s add a list of items and render it below the input.

// src/App.jsx
import { useState } from 'react'

const users = [
  { firstName: "John", id: 1 },
  { firstName: "Emily", id: 2 },
  { firstName: "Michael", id: 3 },
  { firstName: "Sarah", id: 4 },
  { firstName: "David", id: 5 },
  { firstName: "Jessica", id: 6 },
  { firstName: "Daniel", id: 7 },
  { firstName: "Olivia", id: 8 },
  { firstName: "Matthew", id: 9 },
  { firstName: "Sophia", id: 10 }
]

function App() {
  const [searchItem, setSearchItem] = useState('')

  const handleInputChange = (e) => { 
    const searchTerm = e.target.value;
    setSearchItem(searchTerm)
  }

  return (
    <>
      <input
        type="text"
        value={searchItem}
        onChange={handleInputChange}
        placeholder='Type to search'
      />
      <ul>
        {users.map(user => <li key={user.id}>{user.firstName}</li>)}
      </ul>
    </>
  )
}

export default App

Perfect, now we have a list of items which we’re storing in the users variable and then we’re using the map method to loop through the list and render each item using a li tag.

You should be seeing something like this:

Step 4: Building the filtering functionality

Great! We have our input and we have our items, now let’s get to the fun part 👀 We need to change the list of items being rendered depending on what the user types in the input. For that, we need to do 3 things:

Add a state to save the filtered items, and set it to the users variable,
On the event handler, we need to filter the items depending on what the user is writing and set the result to the filtered items state
Render the filtered items instead of the users variable

So let’s get to it:

// src/App.jsx
//... users variable and imports
function App() {
  const [searchItem, setSearchItem] = useState('')
  const [filteredUsers, setFilteredUsers] = useState(users)

  const handleInputChange = (e) => { 
    const searchTerm = e.target.value;
    setSearchItem(searchTerm)

    const filteredItems = users.filter((user) =>
    user.firstName.toLowerCase().includes(searchTerm.toLowerCase())
    );

    setFilteredUsers(filteredItems);
  }

  return (
    <>
      <input
        type="text"
        value={searchItem}
        onChange={handleInputChange}
        placeholder='Type to search'
      />
      <ul>
        {filteredUsers.map(user => <li key={user.id}>{user.firstName}</li>)}
      </ul>
    </>
  )
}

export default App

A common mistake I used to make here is that when filtering the items in the handler function, I used the filtered items state (filteredUsers) instead of the variable that contained all the items (users), which led to the unwanted behavior of the filter working when you first start typing on the input but then if you erase some characters the items don’t get filtered again, and if you erase all the characters you don’t see the whole list of items again.

This happens because when the component first loads, filteredUsers initial state contains all the users, but when you start typing, it gets updated to a new array of users that matches the search input value, and then it can never access the complete list of users again.

So it’s really important that when you do the filtering, you always do it using the variable that contains all the items.

This is working great right now, you should have something like this:

But in real life, it’s more common that you need to get the list of items from an API an then filter those items, so let’s see how we can do that.

Step 5: Getting the items from an API and filtering them

Let’s use the DummyJSON API to get the users. We need to fetch the users when the component loads (we can use an useEffect for that) save them to a state and then render them on the list. Well, we already have the filteredUsers state, and that’s the state that we’re using to render the users, so maybe we can store the users gotten from the API there and filter those same users, right?

Well… no, this is another common mistake that I used to make 😕. If we do that, it would be the same mistake I mentioned above, when the component first loads, the filteredUsers state is empty, then the useEffect gets executed and the users are fetched from the API, set to the filteredUsers state and then rendered, now you have the complete list of items in filteredUsers so you use that to do the filtering, but when you start typing, that state gets updated and it can never access to the complete list of users again.

So what can we do? well, the solution is to create another state, let’s call it apiUsers, that will hold the complete list of users when the component first loads, it will act kinda like the users variable we initially had. Then we use apiUsers, instead of filteredUsers to filter the items when the user types on the input. We no longer need the previous users variable so we get rid of it and initialize the filteredUsers state to an empty array.

// src/App.jsx
import { useState, useEffect } from 'react'

// We no longer need the users variable so you can remove it from here

function App() {
  // add this state
  const [apiUsers, setApiUsers] = useState([])
  const [searchItem, setSearchItem] = useState('')
  // set the initial state of filteredUsers to an empty array
  const [filteredUsers, setFilteredUsers] = useState([])


  // fetch the users
  useEffect(() => {
    fetch('https://dummyjson.com/users')
      .then(response => response.json())
      // save the complete list of users to the new state
      .then(data => setApiUsers(data.users))
      // if there's an error we log it to the console
      .catch(err => console.log(err))
  }, [])

  const handleInputChange = (e) => { 
    const searchTerm = e.target.value;
    setSearchItem(searchTerm)

    // filter the items using the apiUsers state
    const filteredItems = apiUsers.filter((user) =>
      user.firstName.toLowerCase().includes(searchTerm.toLowerCase())
    );

    setFilteredUsers(filteredItems);
  }

  return (
    // ... component rendering
  )
}

This is all well and good but….. why can’t we see any items now when the component first loads? 😱 the answer is that we’re mapping over the filteredUsers state to render the users, and it starts empty now, so no user is being shown until you start typing on the input. How can we render the full list of users when the component first loads and render the filtered users when we type on the input?

There’s a simple solution for that. Previously we initialized the filteredUsers state with the complete list of users, we can’t do that now because the complete list of users is being stored in apiUsers and that state starts as an empty array as well, but it gets updated when we fetch the users right? so all we need to do is to store the users in the apiUsers state AND in the filteredUsers state as well when fetching them from the API.

// src/App.jsx
import { useState, useEffect } from 'react'

function App() {
  // ...states

  useEffect(() => {
    fetch('https://dummyjson.com/users')
      .then(response => response.json())
      .then(data => {
        setApiUsers(data.users)
        // update the filteredUsers state
        setFilteredUsers(data.users)
      })
      .catch(err => console.log(err))
  }, [])

  // ...handler and component rendering

}

Awesome! that fixed the issue 🙌🏼 Now we have a fully functional item filtering functionality with data coming from an API 🎉

You can see that I also added a “No users found” message if no user matches with what we write in the input, you can do it by just editing the part where the users are being rendered, and make it like this:

// src/App.jsx
import { useState, useEffect } from 'react'

function App() {
  // ...state, data fetching, handler

  return (
    <>
      <input
        type="text"
        value={searchItem}
        onChange={handleInputChange}
        placeholder='Type to search'
      />
      {filteredUsers.length === 0
        ? <p>No users found</p>
        : <ul>
          {filteredUsers.map(user => <li key={user.id}>{user.firstName}</li>)}
        </ul>
      }      
    </>
  )
}

However you might notice that the message “No items found” flashes shortly when first rendering the page, we can fix that by adding a loading state, so that if the users are being fetched you can show a “Loading…” message or a spinner, we can also add an error state to show a proper error message if the fetching doesn’t work.

// src/App.jsx
function App() {
  const [apiUsers, setApiUsers] = useState([])
  // initialize the loading state as true
  const [loading, setLoading] = useState(true)
  // initialize the error state as null
  const [error, setError] = useState(null)
  const [searchItem, setSearchItem] = useState('')
  const [filteredUsers, setFilteredUsers] = useState([])

  useEffect(() => {
    fetch('https://dummyjson.com/users')
      .then(response => response.json())
      .then(data => {
        setApiUsers(data.users)
        setFilteredUsers(data.users)
      })
      .catch(err => {
        console.log(err)
        // update the error state
        setError(err)
      })
      .finally(() => {
        // wether we sucessfully get the users or not, 
        // we update the loading state
        setLoading(false)
      })
  }, [])

  //... on change handler

  return (
    <>
      <input
        type="text"
        value={searchItem}
        onChange={handleInputChange}
        placeholder='Type to search'
      />
      {/* if the data is loading, show a proper message */}
      {loading && <p>Loading...</p>}
      {/* if there's an error, show a proper message */}
      {error && <p>There was an error loading the users</p>}
      {/* if it finished loading, render the items */}
      {!loading && !error && filteredUsers.length === 0
        ? <p>No users found</p>
        : <ul>
          {filteredUsers.map(user => <li key={user.id}>{user.firstName}</li>)}
        </ul>
      }
    </>
  )
}

Step 6: Refactoring a little (Bonus)

All is working well now, but what if we want to reuse the input and the list somewhere else? we could refactor this a little to make the components reusable, that way we can avoid repeating code. Let’s see step by step how we can do that.

ItemList Component

First create a new components folder under src. Let’s do the item list first, so create a new file called ItemList.jsx under src/components and copy the section that was rendering the items (just the mapping, without the loading and error state checking) to the newly created file. The items to be rendered as a list will now be gotten through props, so let’s change the filteredUsers variable to items to make it more general. The new component should look like this:

// src/components/ItemList.jsx
// get the items in the props
const ItemsList = ({items}) => {
  return (
    <>
      {/* replace filteredUsers with items*/}
      {items.length === 0
        ? <p>No users found</p>
        : <ul>
          {items.map(item => <li key={item.id}>{item.firstName}</li>)}
        </ul>
      }
    </>
  )
}

export default ItemsList

Excellent, now let’s use our new component in the App.jsx file, replace the list of items being rendered with the new component and pass the filteredUsers as the value for the items prop.

// src/App.jsx
// ... other imports
import ItemList from './components/ItemsList'

function App() {

  //... component logic

  return (
    <>
      <input
        type="text"
        value={searchItem}
        onChange={handleInputChange}
        placeholder='Type to search'
      />
      {loading && <p>Loading...</p>}
      {error && <p>There was an error loading the users</p>}
      {!loading && !error && <ItemList items={filteredUsers} />}
    </>
  )
}

Input Component

Let’s do the Input now, create a new file called Input.jsx under src/components, and copy the input tag from src/App.jsx to the new component, which should now look like this:

// src/components/Input.jsx
const Input = () => {
  return (
    <input
      type="text"
      value={searchItem}
      onChange={handleInputChange}
      placeholder='Type to search'
    />
  )
}

export default Input

Now, on this new component, we don’t have access to the searchItem state and the handleInputChange function so that will throw an error. We could pass those 2 values as props, but let’s do something more interesting. Let’s make it so that the input element can manage its own value inside this component, so we create a new state which will handle that, and a new handler function to update the state.

You might be thinking how can we then filter the values on our App component if it will no longer have access to the input value? Well the answer is: ¡With a callback! We can pass a callback function as a prop that will run inside the handler function and will take the input value as its argument. So change the Input.jsx component to this:

// src/components/Input.jsx
import { useState } from "react"

const Input = ({ onChangeCallback }) => {
  // state to handle the input value
  const [value, setValue] = useState('')

  // new handler function that will update the state 
  // when the input changes
  const handleChange = (e) => {
    const inputValue = e.target.value;
    setValue(inputValue)
    // if the component receives a callback, call it,
    // and pass the input value as an argument
    onChangeCallback && onChangeCallback(inputValue)
  }

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      placeholder='Type to search'
    />
  )
}

export default Input

And change the App.jsx file to import our new Input component and remove all the unnecessary code, remember to pass the previous handler function in App.jsx as a prop to the Input component:

// src/App.jsx
import { useState, useEffect } from 'react'
// import the Input component
import Input from './components/Input'

function App() {
  const [apiUsers, setApiUsers] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  // we no longer need the searchItem state so you can remove it
  const [filteredUsers, setFilteredUsers] = useState([])

  // ... useEffect code without changes here

  // this is the previous handleInputChange function, I changed
  // its name to better represent its new functionality of only 
  // filtering the items
  const filterItems = (searchTerm) => { 
    // we previously set the input state here, 
    // you can remove that now
    const filteredItems = apiUsers.filter((user) =>
      user.firstName.toLowerCase().includes(searchTerm.toLowerCase())
    );

    setFilteredUsers(filteredItems);
  }

  return (
    <>
      {/* Use the new Input component instead of the input tag */}
      <Input onChangeCallback={filterItems} />
      {loading && <p>Loading...</p>}
      {error && <p>There was an error loading the users</p>}
      {!loading && !error && <ItemList items={filteredUsers} />}
    </>
  )
}

export default App

Perfect! The filtering should still be working as usual.

API call

We can also refactor our API call into a custom hook. Create a new hooks folder under the src folder and then create a new file there called useGetUsers.jsx. Let’s now move our apiUsers, loading, and error states, and the useEffect where we’re making the API call to our new hook. We then return the users, loading, and error states from our hook. We could also rename the apiUsers state to just users, since there are no other related variables in this new file.

// src/hooks/useGetUsers.jsx
import { useState, useEffect } from 'react'

export const useGetUsers = () => {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    fetch('https://dummyjson.com/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data.users)
      })
      .catch(err => {
        console.log(err)
        setError(err)
      })
      .finally(() => {
        setLoading(false)
      })
  }, [])

  return { users, loading, error }
}

You can see that we also removed the setFiltered state function from the useEffect, so how can we set the filtered users now? We just need to make the following modification to our App.jsx file.

// src/App.jsx
import { useState, useEffect } from 'react'
import Input from './components/Input'
import ItemList from './components/ItemsList'
// import our new hook
import { useGetUsers } from './hooks/useGetUsers'

function App() {
  // use our custom hook to get our users and 
  // the error and loading variables
  const {users, loading, error} = useGetUsers()
  const [filteredUsers, setFilteredUsers] = useState([])

  useEffect(() => {
    // check if the users are not empty, if so then the 
    // API call was successful and we can update our 
    // filteredUsers state
    if (Object.keys(users).length > 0) {
      setFilteredUsers(users)
    }
  }, [users]) // this effect should run when the users state gets updated

  const filterItems = (searchTerm) => { 
    // we now use 'users' instead of 'apiUsers' to do the filtering
    const filteredItems = users.filter((user) =>
      user.firstName.toLowerCase().includes(searchTerm.toLowerCase())
    );

    setFilteredUsers(filteredItems);
  }

  // ... rest of the component stays the same
}

export default App

Conclusion

Woo! that was a lot to take in, right? 😅 but that’s it! You now know how to make a real time search filter in React with items coming from an API! 🤘🏼 And, if you went through the bonus step, you also learned some techniques on how to break your application into reusable components and custom hooks. Although, being honest, that refactoring is probably a bit of an overkill for such a small application, I did it just for the purposes of this article 😅

I hope you found this guide useful! And if there was something you didn’t understand or if you noticed something that can be improved, please feel free to mention it in the comments. Happy coding! 🤘🏼

Demystifying the useEffect Hook in React: A Beginner's Guide

Alfonsina Lizardo — Thu, 18 May 2023 15:27:31 +0000

Today, we're diving into the useEffect hook, an essential tool in your React arsenal. Understanding the different ways to use useEffect will empower you to handle side effects and manage component lifecycles with confidence.

A reminder...

React components go through different stages during their existence, this is called the component lifecycle. These stages can be broadly categorized into three main phases:

Mounting: The component is created and inserted into the DOM
Updating: The component is re-rendered due to changes in its props or state
Unmounting: The component is removed from the DOM

In this blog post, we'll explore three main use cases of the useEffect hook: with an empty dependency array, with a dependency array with values and without a dependency array. Let's get started!

1. With an Empty Dependency Array

When you pass an empty dependency array to useEffect, it means the effect only runs once, when the component mounts. This is useful for performing one-time initializations or subscribing to events that don't change over time.

An use case for this can be fetching data from an API

import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://mock-api.com")
      .then((response) => response.json())
      .then((apiData) => {
        setData(apiData);
      });
  }, []);

  return (
    <div>
      {data && data.message}
    </div>
  );
}

In this example, the useEffect hook is used to fetch data from an API, the data is then set to the data state variable using the setData function. Since the dependency array is empty, this piece of code will only run once when the component is mounted.

2. With a Dependency Array with Values

When you provide a dependency array with specific values, the effect runs when the component is mounted AND when those values change. This allows you to respond to changes in the component's props or state selectively.

An use case for this could be a search functionality

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

function FilterableList({ items }) {
  const [filter, setFilter] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);

  useEffect(() => {
    const filtered = items.filter(item => item.toLowerCase().includes(filter.toLowerCase()));
    setFilteredItems(filtered.length !== 0 ? filteredItems : items);
  }, [filter, items]);

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

In this example, the useEffect hook filters a list of items based on the user's input. The effect runs whenever the filter or items values change, ensuring the filtered list is updated accordingly.

3. Without a Dependency Array

When you use the useEffect hook without providing a dependency array (not an empty array, just no array at all), it means the effect will run after every render, this means when mounting and on every update of the component due to changes in its props or state. This can lead to performance issues and unexpected behavior, especially if you're updating the state within the effect.

I honestly can't think of a good real life example of when to use this, in my almost 3 years of experience working with React I've never used the useEffect hook like this, if you know of a good use case please let me know in the comments!

Conclusion:

Congratulations! You've taken a significant step toward mastering the useEffect hook. Let's recap the key points we covered in this article:

If you use an empty dependency array, the code block will only execute once, during component mounting
If you pass values to the dependencies array, this will trigger the effect when the component mounts AND when the specific values within the dependency array change.
If you use useEffect without a dependency array it will execute the code after every render.

By understanding these three main use cases of useEffect, you now have the power to handle side effects and component lifecycles efficiently. Remember to use this knowledge wisely and adapt it to your projects' needs.

Happy coding, and may your React applications thrive!

DEV Community: Alfonsina Lizardo

Desbloqueando el crecimiento profesional: El poder de compartir conocimiento y participar en comunidades

Introducción

De codear en solitario a prosperar en comunidad

Compartir conocimiento eleva tus habilidades

Mi viaje hacia hablar en público

Impacto de la comunidad y el networking

Conclusión

#DEVResolutions2024

Professional Goals:

DEV Community Contributions:

🌟 #DEVImpact2023 Reflections

Proud Moments

DEV Contributions

Brilliant Fails

Celebrate the Numbers

Shoutouts

Future Goals

What Does DEV Means to You?

Building a Custom Hook in React: Executing Actions on Specific Window Resizes

Table of Contents

1. Introduction

A reminder on custom hooks…

2. Prerequisites

3. Setting Up the Project

4. Building the Custom Hook Step by Step

4.1 Creating the hook

4.2 Handling the Resize Event

4.3 Adding Debounce for Performance

5. Using the Custom Hook

6. Conclusion

Leveraging the Power of CSS Modules and the "Classnames" Package in React

Table of Contents

Introduction

The issue with using global styles

What are CSS Modules and why use them?

What is the classnames package and how to use it?

Classnames and CSS Modules Integration

1. Bind version

2. No Bind version

Conclusion

Building a Real-Time Search Filter in React: A Step-by-Step Guide

Table of Contents

Introduction

Requirements

Step 1: Setting Up the Project

Step 2: Creating the Input

Step 3: Rendering the list of items

Step 4: Building the filtering functionality

Step 5: Getting the items from an API and filtering them

Step 6: Refactoring a little (Bonus)

ItemList Component

Input Component

API call

Conclusion

Demystifying the useEffect Hook in React: A Beginner's Guide

A reminder...

1. With an Empty Dependency Array

2. With a Dependency Array with Values

3. Without a Dependency Array

Conclusion: