DEV Community: Anthony

Today I Learned — The Javascript In Operator

Anthony — Sun, 28 Mar 2021 12:29:02 +0000

Earlier this week, during one of my code challenges, I was asked to create a function that took in two arguments, an object and a property, that would return the value of the prop if the object contained the property or simply false if it didn't. Long story short, I ended up using Javascript's hasOwnProperty , but along the way I came across / dove into the in operator.

As someone who has never really used [for .. in loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) in Javascript, I never had the chance to really dive into what the in operator is actually doing / used for, until recently.

What Does the In Operator Look Like?

let object = {fruit: "apple", job: "lawyer"}

// propertyName in objectWeWantToCheck
"fruit" in object

What Does the In Operator Do?

It returns true if the object OR its prototype chain contains the specified property

So using our example above: it would result in true

How To Use It

With Arrays

// Use the index of the array + in operator + array name
let colors = ["red","green","blue"]

0 in colors // true
1 in colors // true
3 in colors // false
9 in colors // false

// Notice that the operator functions differently with arrays than it does with objects
// You must use the index with arrays, not the value
"red" in colors // false

// Arrays have a .length property that tells us ... the length, we can use in to confirm this
"length" in colors // true

With Objects

let object = {fruit: "apple", job: "lawyer"}

"fruit" in object // true
"height" in object // false

Alongside the Delete operator and Undefined Properties

let object = {fruit: "apple", job: "lawyer"}
delete object.fruit
"fruit" in object // false

// However -- if instead we did the following:

let object = {fruit: "apple", job: "lawyer"}
object.fruit = undefined

// We'd be in for a surprise
"fruit" in object // true

Its always nice to notice and pick up on little things like this as you continue to grow as a developer 😎

VS Code: 14 Keyboard Shortcuts to Increase Your Productivity

Anthony — Thu, 18 Mar 2021 22:43:13 +0000

While customizing your VS Code with a nice (hopefully dark) theme and handy extensions can make the experience a whole lot better for you, I'm here to share a few of my most used keyboard shortcuts / tricks to hopefully make your stay in VS Code a little bit better, while also helping you increase your productivity.

The shortcut keys are specific to Mac, but they should be fairly similar on Windows.

Deleting

1. Delete One Word at a Time

OPTION + BACKSPACE

2. Delete Entire Line to Left of Cursor
COMMAND + BACKSPACE

Selecting

3. Select One Word at a Time

OPTION + SHIFT + LEFT ARROW -or- RIGHT ARROW

4. Select Everything to Left or Right of Cursor

COMMAND + SHIFT + LEFT ARROW -or- RIGHT ARROW

5. Select Each Occurrence of a Word, One by One

COMMAND + D

6. Select All Occurrences of a Word

COMMAND + SHIFT + L

Multi-Cursor
(To exit any multi-cursor mode, just press ESCAPE)

7. Place Multiple Cursors in Editor

COMMAND + CLICK

8. Place Multiple Cursors Up and/or Down From Current Line

COMMAND + OPTION + UP ARROW -or- DOWN ARROW

Moving Code
9. Move Line of Code (or selection of code) Up or Down

OPTION + UP ARROW -or- DOWN ARROW

Pasting
10. Copy n Items To Paste n Items

COMMAND + DOUBLE CLICK (to select), then COMMAND + C to copy,
then COMMAND + DOUBLE CLICK (to select), then COMMAND + V to paste

Navigation

11. Quickly Change Tabs

COMMAND + OPTION + LEFT ARROW -or- RIGHT ARROW

12. Show/Hide Sidbar

COMMAND + B

13. Show/Hide Explorer/Files

COMMAND + SHIFT + E

14. Show/Hide Extensions

COMMAND + SHIFT + X

And thats that! Hopefully this list introduced you to something that you can incorporate into your daily use of VS Code to increase your productivity.

As always, refer to the docs for more info:
VS Code Shortcut Guide

Feel free to reach out here or on my socials for any questions, suggestions, or to say hello 👋

React: Fetch Data from API with useEffect

Anthony — Sun, 14 Mar 2021 16:14:09 +0000

This post will quickly go over how to make use of the useEffect hook in React to retrieve data from an API.

This post assumes that you have a general understanding of how to fetch/retrieve data from an API as well as the fundamentals of React and React Hooks.

Our Component

Here we have a simple component.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

The component will be responsible for displaying an image of a random dog that is received from the API that we are fetching from. To do this, we'll need to:

Import useState and useEffect
Create our dogImage variable as well as the setDogImage function via useState
Create out useEffect function — this is where we'll perform our fetch
Within our useEffect function we'll use setDogImage to.. well... set dogImage to the image url that we received
Use dogImage as the src for our image so that we can display the random dog

The API

The API that we're using has a few different endpoints that we can use, but for this simple example we'll just use the random image endpoint. This endpoint will simply return an object containing a message key and status key, we're only concerned about the message key in this simple example. The message key will contain the url that we'll use as the source for our image.

Putting it Together

// 1. Import *useState* and *useEffect*
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
    // 2. Create our *dogImage* variable as well as the *setDogImage* function via useState
    // We're setting the default value of dogImage to null, so that while we wait for the
    // fetch to complete, we dont attempt to render the image
  let [dogImage, setDogImage] = useState(null)

    // 3. Create out useEffect function
  useEffect(() => {
    fetch("https://dog.ceo/api/breeds/image/random")
    .then(response => response.json())
        // 4. Setting *dogImage* to the image url that we received from the response above
    .then(data => setDogImage(data.message))
  },[])

  return (
    <div className="App">
        {/* 5. Using *dogImage as* the *src* for our image*/}
    {dogImage && <img src={dogImage}></img>}
    </div>
  );
}

export default App;

If our message returned an array of urls, like this:

// API Used: https://dog.ceo/api/breeds/image/random/3
// Returns:
{
    "message": [
        "https://images.dog.ceo/breeds/setter-irish/n02100877_1453.jpg",
        "https://images.dog.ceo/breeds/buhund-norwegian/hakon3.jpg",
        "https://images.dog.ceo/breeds/dane-great/n02109047_31049.jpg"
    ],
    "status": "success"
}

We could do the following:

// 1. Import *useState* and *useEffect*
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
    // 2. Create our *dogImage* variable as well as the *setDogImage* function via useState
    // We're setting the default value of dogImage to null, so that while we wait for the
    // fetch to complete, we dont attempt to render the image
  let [dogImage, setDogImage] = useState(null)

    // 3. Create out useEffect function
  useEffect(() => {
    fetch("https://dog.ceo/api/breeds/image/random/3")
    .then(response => response.json())
        // 4. Setting *dogImage* to the image url that we received from the response above
    .then(data => setDogImage(data.message))
  },[])

  return (
    <div className="App">
        {/* 5. Returning an img element for each url, again with the value of our src set to the image url */}
    {dogImage && dogImage.map((dog) => <img width={"200px"} height={"200px"} src={dog}></img>)}
    </div>
  );
}

export default App;

And thats that! You can view the live demo of this and explore the code yourself on this Replit.

As always, refer to the docs for more info:
MDN — Fetch

React Hooks

Dog API

Feel free to reach out here or on my socials for any questions, suggestions, or to say hello 👋

Populate Dropdown Options in React

Anthony — Mon, 01 Mar 2021 19:23:17 +0000

When I first started learning React — I remember struggling to figure out what the necessary logic would be to create a dropdown based on items from an array or object. While it is very straight forward to me now, I'm sure I won't be the last person to have that initial struggle when first building an app with React that needs a dropdown like that. The goal of this post is to help those who may need it in the future.

This post will go over a simple scenario on how to create and dynamically populate dropdown options based on data in an array. This post assumes that you have a general idea of how React works as well as knowledge about React Hooks — specifically useState

The Situation

We have an array which contains some type of data — whether it is hard coded values or values that came from an external source, like an API.

The Goal

We want to take each value in that fruits array and turn it into an option within a dropdown menu. Then display that selected option above the dropdown.

The Starter Code

We have a simple React app / component that has:

an array of objects — each representing a fruit — with keys for its value (what we actually want React to use/show us after selecting it) and its label (what we'll see in the dropdown list options).
a piece of state — that we'll use to display our selection
a handleFruitChange function on the select element so that we can update state after the selection changes
the default / starting option in our dropdown

import React, {useState} from 'react';
import './App.css';

function App() {
  // Array of objects containing our fruit data
  let fruits = [
    { label: "Apple", value: "🍎" },
    { label: "Banana", value: "🍌" },
    { label: "Orange", value: "🍊" }
]

// Using state to keep track of what the selected fruit is
let [fruit, setFruit] = useState("⬇️ Select a fruit ⬇️")

// Using this function to update the state of fruit
// whenever a new option is selected from the dropdown
let handleFruitChange = (e) => {
  setFruit(e.target.value)
}

  return (
    <div className="App">
    {/* Displaying the value of fruit */}
    {fruit}
    <br />

    {/* Creating our dropdown and passing it the handleFruitChange 
      so that every time a new choice is selected, our fruit state 
      updates and renders an emoji of the fruit.
    */}
    <select onChange={handleFruitChange}> 
        {/* Creating the default / starting option for our 
          dropdown.
         */}
      <option value="⬇️ Select a fruit ⬇️"> -- Select a fruit -- </option>
    </select>

    </div>
  );
}

export default App;

Populating the Dropdown

Now that we have the basic layout of our app and the very beginning of our dropdown — we'll need to go through each object in the fruits array and create an option element for it, with the corresponding value / label.

import React, {useState} from 'react';
import './App.css';

function App() {
  // Array of objects containing our fruit data
  let fruits = [
    { label: "Apple", value: "🍎" },
    { label: "Banana", value: "🍌" },
    { label: "Orange", value: "🍊" }
]

// Using state to keep track of what the selected fruit is
let [fruit, setFruit] = useState("⬇️ Select a fruit ⬇️")

// Using this function to update the state of fruit
// whenever a new option is selected from the dropdown
let handleFruitChange = (e) => {
  setFruit(e.target.value)
}

  return (
    <div className="App">
    {/* Displaying the value of fruit */}
    {fruit}
    <br />

    <select onChange={handleFruitChange}> 
      <option value="⬇️ Select a fruit ⬇️"> -- Select a fruit -- </option>
            {/* Mapping through each fruit object in our fruits array
          and returning an option element with the appropriate attributes / values.
         */}
      {fruits.map((fruit) => <option value={fruit.value}>{fruit.label}</option>)}
    </select>
    </div>
  );
}

export default App;

Now our dropdown will include an option for each fruit in our fruits array. After selecting one, it'll display above the dropdown.

Note: This code would give you a warning in console because we did not give the option a key (which React wants for list items). To get rid of the warning you'd simply update the code to look like this:

{fruits.map((fruit) => <option key={fruit.label} value={fruit.value}>{fruit.label}</option>)}

And thats that! You can view the live demo of this and explore the code yourself on this Replit.

Feel free to reach out here or on my socials for any questions, suggestions, or to say hello 👋

How To: Use LocalStorage with React

Anthony — Wed, 24 Feb 2021 10:22:04 +0000

When building a React app, there will be times where you'll want to persist data in one way or another. Typically you'd use some type of backend, especially for more sensitive data, but sometimes you just need to save something locally on the users machine — you can do this with LocalStorage. This article will show you how to incorporate LocalStorage with React

Note 1: This article assumes that you have a general understanding of React, React Hooks, and localStorage.

Note 2: You should only use LocalStorage for simple / trivial data. DO NOT store sensitive data in LocalStorage.

Setup

Here is what we'll start with — we'll create a simple component where we'll show the user a welcome message or welcome back message depending on if they've visited the site before (on this device/browser) — which we'll know by making use of localStorage. Right now, it will always show the "first time?" welcome message since we haven't persisted anything to localStorage yet.

Here is our component so far:

// importing useState and useEffect so that we can make us of them when setting/getting
// data from localStorage
import React, {useState, useEffect} from 'react';

function App() {
 let [welcomeMessage, setWelcomeMessage] = useState("Welcome -- is it your first time? (It is, we know 👋)")

  return (
    <div className="App">
    {welcomeMessage}
    </div>
  );
}

export default App;

Persisting To Local Storage

Ok, so once the user visits the page, we want to remember that and let localStorage know that they've officially visited the page at least once. Doing this will allow us to welcome them back when they visit the page again, instead of seeing the "first time" message every time.

The way we'll do this is by using useEffect — so once the App component is rendered it will:

check if localStorage has a "hasVisited" key
- if it does, it will set the state of welcomeMessage to "Welcome back!"
- if it doesn't, it will create the key value pair in localStorage

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

function App() {

  let [welcomeMessage, setWelcomeMessage] = useState("Welcome -- is it your first time? (It is, we know 😉)")

  useEffect(() => {
    // checking if localStorage has a "hasVisited" key
    if (localStorage.getItem("hasVisited")){
        // setting the state of welcomeMessage to "Welcome back!" if it does
      setWelcomeMessage("Welcome back!")  
    } else {
        // creating the "hasVisited" key value pair in localStorage if it doesnt exist
      localStorage.setItem("hasVisited", "true")
    }
    // we are only running this useEffect on the first render of app because we passed an
    // empty array
  },[])

  return (
    <div className="App">
    {welcomeMessage}
    </div>
  );
}

export default App;

Once the user refreshes the page or revists the page the welcomeMessage will say "Welcome back!"

This is a very simple example of how to make use of localStorage in React. One thing to keep in mind is that localStorage will always store / retrieve as strings, so if you are persisting data that is not a string (numbers, arrays, objects) you'll have to stringify / parse them. You can learn more about that process by checking out my other post about how to use localStorage in general.

As always refer to the docs for more info:

MDN — localStorage

React — useState

React — useEffect

Feel free to reach out here or on my socials for any questions, suggestions, or to say hello 👋

How to Use LocalStorage in 3 Minutes

Anthony — Wed, 17 Feb 2021 15:09:00 +0000

LocalStorage is a quick and convenient way for developers to locally store data in key/value pairs on a browser. This article will cover the basics of localStorage.

Important: DO NOT store sensitive data in localStorage as the data is easily accessible and there is very little protection.

As I mentioned at the beginning of this article, using localStorage provides a quick and convenient way for developers to locally store data on a browser — whats nice about localStorage is that the data stays in the browser until it is deleted, as opposed to something like sessionStorage which will destroy itself when a tab/window/browser is closed. Each site will have its own localStorage.

One thing to note about localStorage is that the data is stored / retrieved as a string, meaning that you'll need to make use of JSON.stringify / JSON.parse (which will be covered below) if you plan to store arrays or objects in localStorage.

Ways to Use localStorage

Since the data in localStorage should be trivial/simple — an example of how localStorage could be used is to save website preferences — dark mode, currency, language, etc. This way, if someone visits your site and they set these preferences, you could make use the values to ensure that when they visit the site again, those desired preferences are saved.

How to Use localStorage

There are 4 main methods that you'll use when working with localStorage:

setItem
getItem
removeItem
clear

setItem

We use setItem when we want to add / update a key in localStorage

// We pass in two parameters: (keyName, keyValue)

// Remember -- localStorage only uses strings to store / retrieve its data
//// simple use of localStorage, storing a string 
localStorage.setItem("ourSimpleValue","This is our simple value")

//// converting an array value to a string
localStorage.setItem("ourArray", JSON.stringify(["one","two","three"]))

//// converting an object value to a string
localStorage.setItem("ourObject", JSON.stringify({testKey: "testValue"}))

// If we go to console and do the following:
localsStorage

// We'll see the following:
Storage {ourSimpleValue: "This is our simple value", ourArray: "["one","two","three"]", ourObject: "{"testKey":"testValue"}", length: 3}
length: 3
ourArray: "["one","two","three"]"
ourObject: "{"testKey":"testValue"}"
ourSimpleValue: "This is our simple value"
__proto__: Storage

If we wanted to update ourSimpleValue, its as easy as:

localStorage.setItem("ourSimpleValue","This is our updated simple value")

// Resulting in the following if we type 'localStorage' again:
Storage {ourSimpleValue: "This is our updated simple value", ourArray: "["one","two","three"]", ourObject: "{"testKey":"testValue"}", length: 3}
length: 3
ourArray: "["one","two","three"]"
ourObject: "{"testKey":"testValue"}"
ourSimpleValue: "This is our updated simple value"
__proto__: Storage

getItem

We use getItem when we want to retrieve a value in localStorage

// We pass in the key that we want to retrieve

// Remember -- localStorage only uses strings to store / retrieve its data
//// simple use of localStorage, retrieving a string 
localStorage.getItem("ourSimpleValue")

//// converting an array value to a string on retrieval
JSON.parse(localStorage.getItem("ourArray"))

//// converting an object value to a string on retrieval
JSON.parse(localStorage.getItem("ourObject"))

Without using JSON.parse around our localStorage keys that hold an array or object on retrieval, we would receive our array as a string and lose all functionality of it being an array or object.

removeItem

As mentioned earlier, localStorage will save the key value pairs until it is explicitly destroyed — we can do so by doing the following:

//simply pass in the key you want to remove from localStorage
localStorage.removeItem("ourArray")

// localStorage will now return like so:
Storage {ourSimpleValue: "This is our simple value", ourObject: "{"testKey":"testValue"}", length: 2}
length: 2
ourObject: "{"testKey":"testValue"}"
ourSimpleValue: "This is our simple value"
__proto__: Storage

clear

If you want to be more ruthless, you can destroy all of the stored key/value pairs like so:

localStorage.clear()

// localStorage will now return like so:
Storage {length: 0}
length: 0
__proto__: Storage

If you want to view the localStorage of a particular site (outside of viewing it in console), all you need to do is:

Open DevTools
Click Application
Click Local Storage
Click on the site whose localStorage you'd like to view

As always, refer to the docs for more info:

localStorage

Feel free to reach out here or on my socials for any questions, suggestions, or to say hello 👋

React Hooks: useRef Explained in 2 Minutes

Anthony — Tue, 09 Feb 2021 13:44:20 +0000

When building a React app, there are going to be times where you'll want to reference a particular part of the DOM for one reason or another. If you've written Javascript code before, you're likely very familiar with how you would go about doing this, however In React you'll have to change your ways a bit — luckily it is pretty painless — in comes the useRef hook.

How It Works

The useRef hook simply returns an object with a ".current" property which will be the DOM element or value that you plan to use at some point or another within your component. Note: useRef will not cause any re-renders, it is simply an object that holds the DOM or value you've assigned to it.

How To Use It

Import useRef from React
Create a variable and set the value to useRef()
Place a ref attribute on an element (there are other ways to use this hook, but I'm simply covering the most common / simplest use case), with the value set to the variable created above
Access the DOM element with 'variableName.current'

Example:

// 1. Importing useRef from React
import React, {useRef} from 'react';
import './App.css';

function App() {

// 2. Creating firstParagraph and secondParagraph and setting their values to useRef()
  let firstParagraph = useRef()
  let secondParagraph = useRef()

// 3. Placing a ref attribute "ref={}" on both paragraph tags, with the appropriate
    // variable as the attribute value
  return (
    <div className="App">
      <p ref={firstParagraph} >First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph First Paragraph </p>
      <button onClick={() => firstParagraph.current.innerText = "Hi"}>Change First Paragraph Text</button>

      <p ref={secondParagraph} >Second Paragraph Second Paragraph Second Paragraph Second Paragraph Second Paragraph Second Paragraph Second Paragraph Second Paragraph </p>
            <button onClick={() => secondParagraph.current.style.backgroundColor = "lime"}>Change Second Paragraph Background Color</button>
    </div>
  );
}

// 4. Notice that within our onClick event we reference the appropriate ref
    // (which is holding our DOM element) via variableName.current
        // we then manipulate the DOM element just as we normally would in Vanilla JS.

export default App;

Try It Yourself

It is always easier to see this type of functionality by trying it yourself Head over to the replit, fork the repo, and experiment! Create a new ref, a new paragraph (or whatever you want), and try to connect the dots by doing something similar to whatever you end up adding to the page.

As always, refer to the docs for more clarity / a deeper dive:

useRef Hook

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.

React Hooks: useEffect Explained in 5 Minutes

Anthony — Wed, 03 Feb 2021 15:52:35 +0000

When building a React app, there will be times where we want to run a piece of code after a component is rendered (think fetching data from an api as one example) — the useEffect React Hook will help us accomplish that.

Prior to React Hooks, we would give our app this type of functionality by making use of lifecycle methods (componentDidMount, componentDidUpdate, and componentWillUnmount). The useEffect hook allows us to essentially roll those three methods up into one convenient function.

How It Works

The useEffect hook is just a function that takes in two arguments — a function that you want to run after a component is rendered and a dependency array. The dependency array is optional — I will explain this in more detail a bit further down — but the idea is that it will allow you to limit how often the function passed to useEffect is run. Be sure to import

How to Use It

Import useEffect from React
Add the useEffect function and pass it the function (and dependency array if needed — more info below)

One thing to be aware of is that for certain situations, you'll want to clean up your useEffect function — which is done by returning a cleanup function. You can read more about cleaning up after useEffect here and here or by watching this video.

Examples:

A simple counter example WITHOUT dependency array:

// 1. Import useEffect from React
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0)
const [clicks, setClicks] = useState(0)

// 2. Add useEffect function and pass it the function 
  useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)})
  // Because there is no dependency array, the function inside useEffect will run everytime our App component is rendered, so essentially whenever count / clicks changes.

  return (
    <div>
      {count}
      <button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
      <button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>

      <button onClick={() => setClicks(currentClicks => currentClicks + 1)}>console.log</button>
    </div>
  )
}

export default App;

Dependency Array

There are two ways you can make use of the dependency array:

passing an empty array will only trigger the useEffect on the initial render of the component
passing an array with a dependency (a variable, so in this case our count variable) — which will trigger the useEffect function ONLY when something in that dependency array changes (in this case our count variable)

A simple counter example WITH an empty dependency array:

// 1. Import useEffect from React
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0)
const [clicks, setClicks] = useState(0)

// 2. Add useEffect function and pass it the function and empty dependency array
  useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)},[])
  // Because there is an empty dependency array, the function inside useEffect will run after the initial render of our app, and thats it.

  return (
    <div>
      {count}
      <button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
      <button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>

      <button onClick={() => setClicks(currentClicks => currentClicks + 1)}>console.log</button>
    </div>
  )
}

export default App;

A simple counter example WITH a dependency array that includes the count variable:

// 1. Import useEffect from React
import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0)
const [clicks, setClicks] = useState(0)

// 2. Add useEffect function and pass it the function and empty dependency array
  useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)},[count])
  // Because we included count in the dependency array, the function inside useEffect will run everytime the value of count changes.

  return (
    <div>
      {count}
      <button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
      <button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>

      <button onClick={() => setClicks(currentClicks => currentClicks + 1)}>console.log</button>
    </div>
  )
}

export default App;

Try It Yourself

It is always easier to see this type of functionality by trying it out yourself . Head over to the replit, fork the repo, and try out each of these useEffect examples by copying it into the replit. You likely wont be able to see the console.log message in replit itself, so you'll have to click on the Open In New Tab button found above the preview window, then open DevTools → Console

UE1 — no dependency array — will run after every render — initial App render, when counter is increased or decreased, and when console.log is clicked

useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)})

UE2 — empty dependency array — will only run after the initial render of our App

useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)},[])

UE3 — dependency array with count — will only run after count is changed via '-' or '+'. Nothing will happen when console.log is clicked

useEffect(() => {console.log(`Count was updated: count is ${count} and you've clicked the console.log button ${clicks} time(s)`)},[count])

As always, refer to the docs for more info:
Effect Hook

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.

React Hooks: useState Explained in 5 Minutes

Anthony — Wed, 27 Jan 2021 12:32:10 +0000

When creating a React app, we'll almost always need a way to store / manage state within our component(s) — the useState React Hook allows us to do this in a cleaner and more concise way.

Before Hooks
Prior to React Hooks — like useState — the way we created/managed state in React was through class components, which looked like this:

class Example extends React.Component {
  constructor(props) {
    super(props);
// creating our state object here
    this.state = {
      count: 0
    };
// -- We access count below via 'this.state.count' -- 
// -- We update/change count via 'this.setState' --
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click Me
        </button>
      </div>
    );
  }
}

After React Hooks

With the introduction of React Hooks we no longer need to go about creating/managing state this way — we can use functional components and the useState React Hook.

Note: Hooks will not work in Class Components

There is nothing particularly special about useState, at the end of the day all we are doing is the following:

Importing useState from React
Destructuring useState — first item will be the name of our state variable, second item will be the name of the function that we use to update our state variable. We can name these whatever we want.
Give our state an initial value by passing it to useState

Here is how we'd recreate the above code using functional components + React Hook useState:

// 1. Importing useState
import React, { useState } from 'react'

function App() {
  // 2. Destructuring useState
  // naming our: state variable 'count' & update function 'setCount'
  let [count, setCount] = useState(0);
  // 3. useState allows us to pass in the starting value, here it is 0

 // below we are:
 // - displaying count with {count}
 // - updating count with setCount when the button is clicked (more info below code)
  return (
    <div className="App">
        <p>You clicked {count} times</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
                Click Me
            </button>
    </div>
  );
}

export default App;

At times, React will "batch" state updates to improve performance, because of this it is not ideal to simply update state like so:

 <button onClick={() => setCount(count++}>
                Click Me
            </button>

If React "batches" the state update and your button onClick looks like the above code — it is possible that the state won't be updated with the correct value. The workaround to this is to do what was done in the recreation code snippet:

      <button onClick={() => setCount(prevCount => prevCount + 1)}>
                Click Me
            </button>

Whats happening here:

When the button is clicked, the setCount updater function is called, but instead of passing it a value (like 'count++'), we're passing it a function.
The function is passed an argument 'prevCount' that always refers to the previous value of our state variable (this can be called whatever you want)
The function then makes use of 'prevCount' to ensure that we are always updating the correct value and also prevents React from "batching" the updates.

It is easier to see the difference between using 'count++' and 'prevCount ⇒ prevCount + 1' by trying it out yourself. Head over to the replit and quickly click on the button — with 'count++' you'll notice that it will not register every single click if you're clicking fast enough, however with 'prevCount ⇒ prevCount + 1' you'll notice that every single click is registered — and thus your count will always be correct.

As always, refer to the docs for more info:
State Hook

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.

Chrome DevTools: Increase Productivity with Snippets

Anthony — Wed, 20 Jan 2021 18:32:27 +0000

You've likely been there before — you're in DevTools writing (or maybe copy and pasting) some one off bit of code over and over again to accomplish some kind of task. Wouldn't it be nice if DevTools knew about the code snippet you wanted to use without you needing to write it over and over again?

Today is your lucky day — this article will cover how to make use of Chrome's DevTools Snippets feature so you never have to write or copy paste your code again.

Open the Snippets Panel

To do this, you'll want to click on the Chrome Menu button in the upper right hand corner → More Tools → Developer Tools.

Once the DevTools panel appears, click Sources → Snippets

Create a Snippet

Once you're in the Snippets panel, click New Snippet.

Name your Snippet, then press enter.

Once your snippet is named, click inside of the code editor to the right of it and type your code. Dont forget to save your code once you're done!

Here are a few that I've made:

Say Hi:

console.log("Hi")

Bitcoin Moon?:

fetch ("https://api.coinstats.app/public/v1/coins?skip=0&limit=1&currency=BTC")
.then(r => r.json())
.then(r => console.log(r.coins[0].price.toFixed(2)))

Hide Leetcode Premium Questions:

// code that I found and saved for myself
let table = document.getElementsByClassName("question-list-table")[0];
let tbody = table.getElementsByTagName("tbody")[0];
let rows = tbody.getElementsByTagName("tr");
for (let i = rows.length - 1; i >= 0; --i) {
    if (rows[i].childNodes[2].getElementsByClassName("fa-lock").length > 0) {
        rows[i].parentNode.removeChild(rows[i]);
    }
}

Running the Snippet

Now that you have your snippet, lets use it. You can run your snippet by doing one of the following:

Right click on the Snippet → Run from within the Sources menu (but thats annoying... lets be honest)
(With DevTools open) Press CMD + P (or CMD + Shift + P). Should be similar for Windows .. CTRL instead of CMD.

If the menu pops up and the text field is populated with ">" remove it and type "!". This will then list all of your snippets — like so:

Click on the snippet you want to use or select it and press enter. 🎩✨

Snippets In Action

Say Hi

Bitcoin Moon?

Hide LeetCode Premium Questions

These are obviously pretty basic examples how how to use this feature, but as you can imagine, the possibilities are almost endless here.

As always, refer to the docs for more info:
Chrome DevTools: Snippets

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.

React: The Difference Between State and Props

Anthony — Mon, 11 Jan 2021 10:53:52 +0000

When it comes to React, there are two main ways in which we can store or manage data. This article will explain the difference between the two. This article assumes that have some understanding of the following:

how React works
how React is written
functional components
React Hooks — specifically useState

First things first, there is nothing particularly special about state and props, they are simply Javascript objects that we use to store, manage, and make use of data in our React components. With that out of the way, we can move onto discussing the difference between the two.

State

State is just a piece of data that lives inside of a component. The component is responsible for managing this data. You can think of state the same way you think of variables inside of a function (hence functional components), where the function is responsible for managing and making use of the variables inside of it. State is optional — we make use of it when we need our component to hold some type of information.

Props

Similar to state, props (short for properties) is just another piece of data that we can make use of within a component — the difference being that it is a piece of data that is passed down to a component from another component, rather than the component itself being responsible for creating / maintaining it. You can think of props the same way you think of arguments that you pass to functions.

—-

To better showcase this, please check out the Repl.it I created — which includes additional comments within the code. The only files that matter here are App.js and Box.js — this is where you'll find all of the comments I added. I suggest starting with App.js

TLDR

State: data that lives inside a component

Props: data that is passed into another component

As always, refer to the docs for more detail:
State vs Props

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.

Understanding Javascript's Array Sort

Anthony — Thu, 07 Jan 2021 10:45:42 +0000

When working with data it is a good idea to have the data sorted in some type of meaningful way. Luckily for Javascript developers, the language comes with a built in sort method that can be used on arrays. Great — so why are we here? While the sort method is great on standard strings, there are few gotchas that may trip up some developers. The goal of this article is to cover some of the common gotchas and to cover the basics of this array method.

How The Method Works

By default, the sort method will return a sorted array in ascending order based on their UTC-16 code unit values. This is done by converting each element of the array into a string.

Note: This does not return a copy, it will sort the original array.

Here it is in action on an array of lowercased elements

let colors = ["orange","green","blue","red"]
console.log(colors.sort()) // ["blue", "green", "orange", "red"]

Pretty straight forward so far, but since the default behavior of sort is to convert the elements to strings, then sort it in ascending order based on their UTC-16 code unit values, we'll run into some issues if our elements change even in the slightest way.

// element(s) is/are capitalized
let colors = ["orange","Green","blue","red"]
console.log(colors.sort()) // ["Green", "blue", "orange", "red"]

let numbers = [10,60,6,1,5,55,14]
console.log(numbers.sort()) // [1, 10, 14, 5, 55, 6, 60]

let people = [{name: "mark", age: 22},{name: "jill", age: 10},{name: "anthony", age: 16}]
console.log(people.sort())
// [{ name: "mark", age: 10 },{ name: "jill", age: 16 },{ name: "anthony", age: 22 }]

What I haven't mentioned yet is that the sort method takes in an optional parameter, a compare function, that you can pass to it to define the sort order of the array, which will prevent the method from converting all of the elements to strings, and then sorting those converted "strings".

How the Optional compareFunction Parameter Works

When a compareFunction is given, the elements are sorted based on what is returned by the compareFunction. It goes like this — if...:

compareFunction(a, b) returns less than 0: the index of a will be set lower than b
compareFunction(a, b) returns 0: nothing changes, already sorted
compareFunction(a, b) returns greater than 0: the index of a will be set higher than b

The general idea of the compareFunction is this:


function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

So at this point we know that a regular sort without a compareFunction will do just fine, but what about for situations where we have numbers or objects?

In comes the compareFunction....

Examples with numbers :

function sortByLength(a, b) {
    return a.length - b.length
}

function compareNumbers(a,b){
    return a - b
}

let strings = ["hello","hi","hey"]
console.log(strings.sort(sortByLength)) // ["hi","hey","hello"]

let numbers = [10,60,6,1,5,55,14]
console.log(numbers.sort(compareNumbers)) // [1, 5, 6, 10, 14, 55, 60]

Example with objects:

function sortByName(a,b){
    // ignore upper/lowercase by setting all elements to lowercase
    let nameA = a.name.toLowerCase()
  let nameB = b.name.toLowerCase()
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  return 0;
}

function sortByAge(a,b){
    return a.age - b.age
}

let people = [{name: "mark", age: 22},{name: "JILL", age: 10},{name: "anthony", age: 16}]

console.log(people.sort(sortByName))
// [{name: "anthony", age: 16}, {name: "JILL", age: 10}, {name: "mark", age: 22}]

console.log(people.sort(sortByAge))
// // [{name: "JILL", age: 10}, {name: "anthony", age: 16}, {name: "mark", age: 22}]

Note: if you copy and paste this code, you'll have to avoid running the console.logs back to back — it will execute too quickly and you'll end up seeing the objects sorted by age back to back, instead of the objects sorted by name then sorted by age. Basically run the first console.log to confirm the output of objects sorted by name, then run the second console.log to confirm the objects sorted by age.

And with that, you should have a basic understanding of how the sort method works and how to avoid some of the gotchas.

If you've enjoyed this article, feel free to check out my other JS array method articles:

JS Array Methods You Should Know: .map, .reduce, and .filter (ft. Chaining)

Javascript Basics: Use .push, .pop, .shift, and .unshift to Manipulate Arrays

Javascript: The Difference Between .slice and .splice

10 Javascript Array Methods You Should Know

As always, refer to MDN for more info:

.sort()

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.