Forem: Kevin O'Shaughnessy

React: useState and useEffect

Kevin O'Shaughnessy — Sun, 08 Oct 2023 15:34:03 +0000

Intro

React is a way of using JavaScript in an efficient and straightforward way, separating the code into different component files. It is used to build web applications. Officially, it is defined as "A JavaScript library for building user interfaces."[1] Two of the most important basic React hooks are useState and useEffect. useState allows one to add and update a state variable.[2] useEffect allows for performing side effects and also allows one to synchronize a component with an external system.[3]

useState

State in React is dynamic and can change overtime. It is effectively the default value when a component mounts. Each component maintains its own state but only sets the initial state for its children.[4] In React, there is a clear basic hierarchy of parent component(s) and children. The parents pass props - properties - to the children. Props cannot be changed by the components themselves but are passed to children by parent components.

from:
import React from 'react';

to:
import React, { useState } from 'react';

In order to actually use useState, it has to be imported into the component in which it is being used, as show above. useState will be imported in parentheses (so will useEffect, as we shall see).
The setup in the actual function will look something like this:

function App() {

const [quotes, setQuotes] = useState([])

//rest of code
}

The convention here is to start with the initial state, then the way to update that initial state: ex: state, setState. These 2 will go inside brackets and be set equal to the useState, which will have empty brackets. So useState is equal to the initial state and a function that updates the initial state.

useEffect

The above image is actually a great segue from useState to useEffect. Here, the useEffect is being used with a fetch and is using the function from our useState example. useEffect is great for doing things like fetching data or performing some side function. useEffect accepts 2 arguments and the second is actualyl optional.[5] Here, our useEffect looks like:

useEffect(()=>{
fetch('http://localhost:4000/data')
.then(r => r.json())
.then(setQuotes)
}, [])

But we can simplify it to useEffect(()=>{}, []) in order to clearly see the structure. The first part is the set up and the latter part has the optional dependencies. In my example, I just have an empty array. useEffect is used when interacting with something external, for side effects, and it cannot be used inside loops.

JavaScript Arrays - Index Values and Adding to an Array

Kevin O'Shaughnessy — Thu, 07 Sep 2023 14:02:33 +0000

Intro

Arrays are common JavaScript variables which hold more than 1 value rather than just using separate variables. For example, using basic JavaScript, we could list each value independently or we could list them in an array.

const fruit1 = "apple";
const fruit2 = "orange";
const fruit3 = "grape";
const fruit4 = "strawberry";

const fruit = ["apple", "orange", "grape", "strawberry"];

Arrays can be manipulated -added to, subtracted from, or render only certain values. Arrays can also be listed vertically, for clarity, when needed:

const fruit = [
"apple",
"orange",
"grape",
"strawberry"
];

Index Values

Each array item has its own index number corresponding to its place in the array.[1] This numbering system starts at 0 and goes up to as many objects are in the array. For example, the index of "apple" is 0, so fruit[0] = "apple". Other values include:

fruit[1] = "orange"
fruit[2] = "grape"
fruit[3] = "strawberry"

So, this array has 4 values but only goes up to the number 3 because the index value of the first item is always 0.

Adding to an Array

There are a couple methods for adding items to an array. We can use push() to add something to the end of an array. To add something to the beginning, we would use the unshift method.[2] For our example, this would look like the following:

Adding to the End
const fruit = ["apple", "orange", "grape", "strawberry"];
fruit.push("dragon fruit")
console.log(fruit) would show the value:
["apple", "orange", "grape", "strawberry", "dragon fruit"]

Adding to the beginning
const fruit = ["apple", "orange", "grape", "strawberry"];
fruit.unshift("dragon fruit")
console.log(fruit) would show the value:
["dragon fruit", "apple", "orange", "grape", "strawberry"]

In each of these cases, the original array is being modified, we are not creating new arrays.

Sources Consulted:

https://www.w3schools.com/js/js_arrays.asp
Fluke, Joshua. '5 Must Know Interview Questions for Javascript!' https://www.youtube.com/watch?v=6Wzj7kxfRdI

Asynchronous JavaScript

Kevin O'Shaughnessy — Wed, 28 Jun 2023 14:09:27 +0000

When learning the basics of JavaScript, you should quickly understand that it is a single-threaded language. This means that only one line of code can run at once. In order to run complex code, it is necessary to understand how to run code beyond the basic sequential flow.

Asynchronous JavaScript is particularly useful when dealing with code which may take longer to run. MDN Web Docs defines it as:

"Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result."

Examples of where this can be useful include callback functions, fetching data from an API, promises, and events with event listeners.

If we look at an example, we can see how this works. The following, setTimeout() is a method that sets a timer for a specified piece of code. Notice that the number of seconds, rather than the order, dictate what the output will be.

setTimeout(() => {
console.log("message 1");
}, 7000);
setTimeout(() => {
console.log("message 2");
}, 5000);
setTimeout(() => {
console.log("message 3");
}, 1000);

// Output:

// message 3
// message 2
// message 1

Message 3 only takes 1 second, message 2 5 seconds, and message 1 7 seconds. The code is read in order, line by line, but the output is asynchronous, based on the time it takes to process the three different messages.

Asynchronous operations are handled by an event loop. The code in the console will be read and invoked line by line but certain operations in the stack will take more time and be placed in a task queue, from which the event loop will manage their execution in a single-threaded language like JavaScript.

Error: listen EADDRINUSE: address already in use (JSON)

Kevin O'Shaughnessy — Wed, 24 May 2023 22:34:05 +0000

THE PROBLEM

I began the Ramen Rater assignment for Flatiron School (essentially a lab focused around using GET, POST, PATCH for Postman) by running json-server --watch db.json and I got the following error:

Some error occurred Error: listen EADDRINUSE: address already in use 127.0.0.1:3000
at Server.setupListenHandle as _listen2
at listenInCluster (node:net:1788:12)
at GetAddrInfoReqWrap.doListen as callback
at GetAddrInfoReqWrap.onlookup as oncomplete {
code: 'EADDRINUSE',
errno: -98,
syscall: 'listen',
address: '127.0.0.1',
port: 3000

With this error, I am not able to continue working on the lab (Postman). I researched this issue on Google, Stack Overflow, Slack, and Piazza.

HOW TO FIX THIS

I booked a help session and was able to get help fixing this issue in 2 ways. The core issue was that port 3000 was already in use due to a previous lab still running. One of the ways to fix this is to run npx kill-port in the terminal.

This frees up the port and makes it available for running json-server --watch db.json and getting the API set up in Postman.

A second way to solve this problem would be to find the process ID (PID) through entering lsof -i tcp:3000 in the terminal, then running kill -9 [process id number]. This will free up the port and allow one to run db.json.

Mapping Arrays with JavaScript

Kevin O'Shaughnessy — Sat, 13 May 2023 02:04:20 +0000

When learning the basics of JavaScript, one will come across arrays quite quickly. Arrays are useful and very malleable. They can be filtered through, reduced, expanded, and mapped. When mapping an array, one is accepting a callback function and passing each element so that it returns a new array that is the same length as the original with the data modified in the result but not permanently altering the original array.

When one comes across the map() method, it is often referred to as Array.prototype.map(), as in the case of freeCodeCamp [1].

The map() method is great for scanning through data for specific pieces of information in each array and creating a new array with it. I have an example below:

Using the above data related to some of the most prominent Japanese leaders of the Meiji Restoration, I can use the map() method to pull the names of these people and create a new array with them.

I hope this helps beginning students of front end or full stack web development in understanding an essential part of JavaScript. Map() is widely applicable for numerous types of data in arrays, from retrieving names to product prices.

Sources:

[https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array]
[https://www.w3schools.com/jsref/jsref_map.asp] W3 Schools is another great resource for learning about arrays. They succinctly list the 3 major points when it comes to map():

"map() creates a new array from calling a function for every array element.

map() does not execute the function for empty elements.

map() does not change the original array."

The Journey Begins

Kevin O'Shaughnessy — Thu, 09 Mar 2023 21:25:45 +0000

"Wisdom is the daughter of experience." -Leonardo da Vinci (1452-1519)

My path towards software engineering has begun. Actually, I briefly studied HTML and CSS on freeCodeCamp several years back. JavaScript is a stern teacher and certainly instills a sense of humility in the student. From perseverance, however, comes the necessary knowledge to move forward.

I come to coding with a background in liberal arts (Rutgers: MA and BA in history), warehouse leadership, and a basic understanding of cybersecurity acquired via Kenzie Academy last year. I'm incredibly grateful to Flatiron for being able to cultivate a passion for web development with this opportunity. Flatiron has a tremendous benefit over other schools in that it is very flexible for those who work full-time.

Learning to code opens so many doors and allows one to thrive in the dynamic work environment of the 21st century. The future looks bright! Happy Coding!