Learning React made it easier to code

I've been learning to make websites over the last several months and I give a lot of props (haha, get it?) to React for my latest stretch of improvement. I just completed my second website and the experience was much smoother than my first.

Organization

My biggest issue in my first website (written in Vanilla JavaScript) was the legibility of my code. The website was completely functional and bug free (as far as I know), but the code left a lot to be desired. Functions were handling multiple tasks in the effort to make them more "flexible" and there were many redundancies all over the board.

After spending some time learning React it was time to complete another website. My ability to write JavaScript logic didn't vastly improve in this time, but by virtue of using React Components I had corrected all of the issues I was having with organization.

A React Component is simply a reusable bunch of code with it's own individual JSX (functionally HTML), logic (JavaScript), and styling (CSS). Because components are stand alone, it becomes easier for me to just get into it and start making an individual piece to the puzzle that is a website. More importantly though, it gave me practice in keeping my code focused, organized, and legible. Additionally, when I want to make a component "flexible" and reusable, I can do so passing props to my component to conditionally change the component without any sacrifices to focus or legibility.

I love State

State is a very powerful kind of variable. So much so that you should pay attention to where you declare it for maximum efficiency. Where does this power come from? State holds data and dynamically re-renders the component whenever it changes.

Here is an interesting way that I used state in my most recent website

State with useEffect

We use GET requests to receive data from a server. The useEffect hook is a common way to do a GET Request when a website first loads and then save that data to a state variable. The useEffect hook ALSO has an optional second parameter that allows us to run the useEffect function every time a specific state changes. Here's how I used this in my project.

1) So when my website loads, it will fetch my data at "http://localhost:3000/pets" from my local json server, convert the response from json, shuffle the array of data, then set this data to equal my "shuffledPets" state which I will use in a variety of ways throughout my project.

useEffect(() => {
    fetch("http://localhost:3000/pets")
    .then(res => res.json())
    .then(data => setShuffledPets(shuffle(data)))
  }, [reshuffle])

More importantly, that second parameter in my useEffect function is a state called "reshuffle". Whenever this state changes, it will trigger a new GET request to pull the most up to date information, and reshuffle my array of pets.

2) This isn't really relevant to React, but I used the Fisher-Yates algorithm to shuffle the array randomly.

  function shuffle(arr) {

    const array = [...arr]

    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      const temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array
  }

3) I then created a function called onReshuffle that changes the value of the reshuffle state which I then passed down as props to other components so that I could trigger a reshuffle on certain actions and conditions.

 function onReshuffle() {
    setReshuffle(() => !reshuffle)
  }

4) Here's an example of how one way I conditionally reshuffled my array.

My website displays two pets from the array. The user clicks one to give a "like" to that pet. When the user gets to the end of the array of pets, a reshuffle is triggered.

Note: I used .slice(start, end) on my array of pets to display two at a time. The start and end states change on click to move to the next pet. When the user reaches the end of the array and the second parameter of .slice() is greater than the length of the array, it changes the reshuffle state and resets the display to .slice(0,2), the beginning of the array.

if(end > shuffledPets.length) {
        onReshuffle()
        setStart(0)
        setEnd(2)
      }

That's it

Just wanted to talk about my progression as a coder and how much I'm loving React. Thanks for reading!