Submitted over 2 years ago

URL shortening landing page using React

Kaung Zin Hein•720

@K4UNG

Preview site View code

This is a solution for...URL shortening API landing page

HTML
CSS
JS
API

3intermediate

Design comparison

SolutionDesign

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.

Community feedback

Fazza Razaq Amiarso•2,340

@fazzaamiarsoPosted over 2 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!

Kaung Zin Hein•720

@K4UNGPosted over 2 years ago

@fazzaamiarso It's just my personal preference to include them. Thanks for pointing out tho!

Please log in to post a comment

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