Submitted about 3 years ago

URL shortening landing page using React

react

Kaung Zin Hein•720

@K4UNG

A solution to the URL shortening API landing page challenge

Preview Code

Solution retrospective

This is my second React project and I wanted to try working with APIs in React and utilize what I've been learning in lectures for the past few days and to my surprise, it was actually more fun than I expected. I didn't really focus that much on styling though. It's been a while since I last properly wrote CSS so it was a bit rusty. Other than that, it was a fun and great experience and, I got to familiarize myself with the core features React. I also added a 'remove all' button for a slightly better user experience. I'd love to hear your feedbacks and suggestions on how I can improve further. Thanks in advance.

Code

Please log in to post a comment

Community feedback

Fazza Razaq Amiarso•2,320

@fazzaamiarso

Posted about 3 years ago

Hello @K4UNG! Nice and clean solution!

I just have a quick tip on the useEffect dependencies.

useEffect(() => {
    const links = getLS();
    if (links) {
      setLinks(JSON.parse(links));
    }
  }, [setLinks]); // you can remove this from dependencies array

You can remove setLinks because React guarantees that state setter will never change. Here is a useful ESlint plugin https://www.npmjs.com/package/eslint-plugin-react-hooks

I hope it's useful! Cheers!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord