Forem: tywenk

Javascript Shorthands: Ternary, Logical || and && Assignments

tywenk — Tue, 12 Apr 2022 19:37:25 +0000

Gotta go fast

Why waste time say lot word when few word do trick?

This is perhaps the insidious mantra of programmers the world over. Too busy hacking into the mainframe they have no time for multisyllabic variable names. They don't have the bandwidth in their own minds to cache long winded expressions. They would rather use --nay, they NEED to use-- terse, to-the-point, language to snipe their bits out of the sky. Like a painter at an easel, a programmer at a greasy keyboard feels the gravitational pull, the irresistible urge, the hypnotic Siren's song... to use shorthand expressions.

Wise programmers often warn young programmers to not adopt this mentality, especially while learning how to code. It can become a bad habit that can in cases lead to harder to read, harder to maintain, and harder to update code. That said, in my explorations of the topic, I found it useful to discover (to my delight) that a) there are proper places to use it, and b) people do use them and you should know how to read them. This blog is about the ternary expression and its tangent cousins -- the AND and the OR operators -- and how they can be used to write succinct yet still straightforward code.

The Ternary Expression

Ternary expressions are a shorthand way to write if else statements.

Ternary expressions threw me off early on. The semantic structure of if else statement was easy to understand. If this expression returns truthy, then execute this expression. If it is not truthy, execute this other expression. Why fix something that ain't broke?

The strange syntax of a ? and the trailing : were confusing. I think it's because when reading a line of code, the ? and : can be easily lost in the jumble of text and numbers.

Here's a breakdown of it, in plain English:

if this is true ? then do this : otherwise do this

The usefulness of ternary expressions comes in handy when you want a single-line way to assign a variable a value dependent on another variable. Let's take these three lines that return a isFullyCharged as true if our battery level is at 100%.

const batteryLevel = 26;
const isFullyCharged = batteryLevel == 100 ? true : false;

return isFullyCharged;
//false

Written out as an if else statement, and assuming we still want to return a new boolean variable, it comes out much longer.

const batteryLevel = 26;
let isFullyCharged;

if (batteryLevel == 100){
  isFullyCharged = true;
} else {
  isFullyCharged = false;
}

return isFullyCharged;

Ternary expressions are useful then for concise single-line checks that are actually quite readable once their at first strange syntax can be overcome.

And, as I've read more about them, they can also simplify more complex situations, like nested checks, in which case using chained ternary expressions results in cleaner and less bug prone code.

The Logical OR Assignment

The logical OR operator can be used in many ways, but the one I will discuss here is its use as a way to check a value before assignment to a variable.

The OR operator, denoted as ||, can be used in the primary statement to return a true or false value.

The || operator typically takes two expressions on either side of it. Take this example:

let a = 5
let b = 1

return b > a || a > b

This short program returns a true or false boolean. The OR operator is executed left to right. First b > a is checked to be true. In this case, b is smaller than a, so the expression returns false. Upon this return the || operator then returns the value of the expression on its right. In this case, a > b returns true, because 5 is a larger number than 1, so as a result the entire expression returns true.

When it comes to logical OR assignment can be used as a checker to ensure a value is empty before assigning it. For instance, this example:

let name

return name ||= "No name"

The ||= operator only assigns name to "No name" if name is falsy.

The output of this program will be "No name". The ||= shorthand is a way to check if the value on the left is falsy before assigning it to the value on the right. In this case, name is declared but undefined, so has the value undefined. In Javascript, undefined is considered a falsy value, so as an primitive value it returns false. Because the left expression is false, the right expression is executed.

This might become more clear if the name ||= "No name" expression is pulled apart, into its non-shorthand components. That expression is equivalent to name || (name = "No name")!

This is worth reiterating, the following two expressions are equivalent, and both assign "No name" to name:

name ||= "No name"

name || (name = "No name")

This is easier to read, as it more closely resembles the typical OR expression. In essence, this shorthand is a quick way to check if the value of name is falsy before deciding to assign it a value. This can be useful when you don't want to overwrite a variable or if you don't want to return undefined and only return a legible string instead.

Using the ||= is also completely different from assigning a variable to an OR expression. For instance, name = "No name" || "Other name is valid, and will assign name to "No name", but it does so through a different means than the ||=

The Logical AND Assignment

The logical AND is much like the OR. Instead denoted as &&, it is also an operator that takes in two values, one of the left and one on the right. In this case, both the left and right values must convert into truthy values for the second value to be returned. Otherwise the first value is returned. This evaluation is executed left to right. If the left value converts to falsy, the right value is never evaluated and the entire AND expression returns false. However if both execute as truthy, then the second value will be returned.

So take the example:

let name
name = '' && 'Bob';  // name is assigned ''
name = 'Bob' && 'Jill';   // name is assigned "Jill

In the first expression, '' is an empty string and considered falsy. The entire && expression then returns the first value, which is falsely, and short circuits the entire expression. In the second expression, name is assigned to 'Jill' because both strings 'Bob' and 'Jill' return truthy, and so both are evaluated. Because both evaluate true, the second value is returned.

Now we go onto the logical AND assignment:

let name
let lastname = "Exists"
name &&= "Tywen"
lastname &&= "Kelly

When it comes to the logical AND assignment, denoted by &&=, the expression only assigns name to "Tywen" if name is truthy. name is actually falsy, as it is undefined, so name is not assigned the value "Tywen". lastname on the other hand is assigned a truthy value of "Exists", so when it comes time to assign it with a logical AND assignment, it successfully assigns it to "Kelly".

React: How to use useState()

tywenk — Tue, 12 Apr 2022 19:36:39 +0000

In this blog I will be strictly discussing React in the context of using it with functional components and hooks.

What is useState?

useState is a built-in method of the React library that allows developers to store variables that persist throughout the rendering lifecycle of a componenet. Much like a variable, state can be called and mutated throughout a component. State can also be passed down as a prop to children components. State has a unique property which is that it requires a setter function to change the state, rather than in Vanilla Javascript where you can reassign a variable declared with let elsewhere within appropriate scope. This gochya does add a little syntactical weight to useState but it can be easily managed.

To use useState you have to import it at the top of your component, like so:

import { useState } from "react"

Note that if you are using a React version older than version 17, then your syntax for import will look like: import React, { useState } from "react"

To implement useState you will insert the useState assignment call inside of your functional component. For example say we wanted to store the health of a player of our game made in React:

import { useState } from "react"

function Player() {
    const [health, setHealth] = useState(100)
    return (
        <div>
            <h1>Hello, Player</h1>
        </div>
    )
}

export default Inventory

Let's focus in on the line of code that is setting state.

const [health, setHealth] = useState(100)

useState is a method that returns an array, or more precisely, a tuple. A tuple is an array of set length. While Javascript does not officially have tuples, colloquially we can say that useState returns a tuple because it always returns an array with length two.

The array useState returns a specific ordering. The first index is reserved for the current state of the variable, and the seconds index is reserved for a setter function that can mutate the value of the In this case, health references the current value of the player's health. setHealth references a function which takes as either a) and argument or b) a callback that sets the value of health. By convention the setter function is prepended with set although it is not required. Also by convention when one calls useState they reference it using array destructuring, as we did in our example.

Finally, the number 100 in useState is used to initialize health to the value of 100.

In short, the syntax for declaring a state variable can be broken down into this more readable psuedo code:

const [declare the variable name, declare setter function to change variable] = useState(initial value)

So, how does one set a new state value?

In most cases it is as easy as setHealth(80). This will overwrite the initial value of 100 and set it to 80. However is cases where you want to add onto the current value, you must use a callback in the setter. So, to add 30 to now current value of health (80), we use setHealth(health => health += 30).

Fundamentally this is because the setter function is asynchronous. By implementing a callback, we refer the the current value of the state. If we don't use a callback then we are blindly setting the value and not waiting to ensure the value was set. This callback structure becomes useful when (or if) you want to chain series of setters together all of which rely on the previous one completing. For example

setHealth((health) => (health += 30))
setHealth((health) => (health += 30))
setHealth((health) => (health += 30))

Assuming health starts at 100 then health will be 190 at the end of this operation. If we did not use callbacks, then the value comes out differently, and not as expected.

setHealth(health += 30))
setHealth(health += 30))
setHealth(health += 30))

In some cases this may return 130 as the final value. This unexpected behavior is why you should always use callbacks in your setter function to ensure you are getting the most current value of the state you are trying to manipulate.

If you are coming from Javascript this might seem like a lot of work to declare a variable. Why can't we just const health = 100 and later in the code, to update it, set health = 80?

React components have a render lifecycle. Each time a component re-renders it will redeclare all of the variables inside of it, essentially cleaning its cache. If we look at this diagram's "Updating" column we can see that setState() causes a render to occur.

Source

When we set a new value to state, the entire component automatically re-renders to update its UI to account for new values. This is where React gets its name. Setting state tells React to "react" to the changes you give it. With React you don't need to impertively (see: manually) tell Javascript: "ok, if this variable changes, then update this part of the UI." React as a library handles that all by itself.

So, to reiterate, calling a setting function on state variable causes a re-render of the component. There a few caveats here, like if the state doesn't change React is smart enough not to re-render.

What is state below the hood?

I'll leave you with this note, which I found interesting, about how state is actually handled behind the scenes by React:

"State is a plain JavaScript object used by React to represent an information about the component’s current situation. It’s managed in the component (just like any variable declared in a function). The difference is while a “normal” variable “disappears” when their function exits, the state variables are preserved by React." Citation.

How Do Hash Tables Work Under the Hood?

tywenk — Tue, 12 Apr 2022 19:35:23 +0000

Hash tables are a very time efficient way to store data in the form of key value pairs. Hash tables have a O(1) time complexity in accessing data, and almost nearly as fast in inserting (adding) data.

Hash tables are also called objects in JavaScript, dictionaries in Python, and hashes in Ruby.

To first understand how hash tables work, first lets understand how arrays work.

Say you had an array of your extended familial relations. It might looks like:

fam_array = ["Uncle", "Aunt", "Cousin", "Cousin"]

In this situation the keys of each item are automatically indexed as numbers. With the first item starting at 0 each item is assigned a sequential key. In most languages there is a syntax to access an item in the array via index notation. Calling fam_array[0] would return "Uncle".

This retrieval is very fast and inefficient because behind the scenes the 0 is actually a pointer for a specific location in memory. Memory itself can be thought of as its own array. Memory is a linear line of cells each "indexed" with a its own addressing system. This addressing system uses hexadecimal, which is base-16 numerating.

Let's take a look at this diagram of memory.


===============     Highest Address (e.g. 0xFFFF)
|             |
|    STACK    |
|             |
|-------------|  <- Stack Pointer   (e.g. 0xEEEE)
|             |
.     ...     .
|             |
|-------------|  <- Heap Pointer    (e.g. 0x2222)
|             |
|    HEAP     |
|             |
===============     Lowest Address  (e.g. 0x0000)

As a refresher, the stack is where the program's functions and variables are loaded, looped, and run. The heap is where non-primitive objects and arrays are stored, and are referenced at by the stack.

In our example, fam_array is declared in the stack then assigned a pointer to a location in the heap which houses the actual array of ["Uncle", "Aunt", "Cousin", "Cousin"]. When fam_array[0] is called, the 0 acts as a pointer to the string "Uncle" in the heap with its addressed as some hexadecimal, like 0x0f403...23c.

This method of using a number 0 as a pointer is extremely, extremely time efficient. It is a direct pointer to a spot in memory.

The idea of hash tables is to bring that access efficiency of arrays to the more human-readable way of storing information in a key-value pair schema.

Let's transform that array into a hash table, and add the following keys with names:

fam = {
    bob: "Uncle",
    mary: "Aunt",
    leo: "Cousin",
    cher: "Cousin",
}

Here each key is a string of a name. The value is that person's familial relation.

Computers don't really like using strings such as "bob" to store data. "bob" isn't a pointer to a place in memory and can't be used in the same way a number index like 0 in the previous example of arrays could be.

The solution is to transform the key into an numbered index by using a hash function.

A hash function turns keys into unique index, as if it were an array. This hashing is of course what gives hash tables its name.

The key in the key-value pair "bob": "Uncle" would be run through a hash function, then given an index. What returns a number that is smaller than the length of the hash table. In this case, the hash table is four items long, so the maximum index "bob" would hash into is 3.

In psudeocode this would look like these two steps:

hashed_key = hash(key)
index = hashed_key % array_size

Colloquially these two steps are referred to the "hash function".

This hashing process is run every time a hash table is created, accessed, modified. Hashing is a semi-random process that takes an input and outputs a ranom-looking string of a fixed bit length. Hashing algorithms vary, but their main purpose is to generate a unique looking number based on an input. bob might hash into the hexidecimal 0x34acc53, but bo which is only one letter different might hash into 0x667df3d. Either way hashing bob or bo will always yield the same result.

So, using the example of the hash fam, I could access the value of the "bob" key by writing something like fam[:bob] or fam.bob.

This would require the language to hash the string or symbol bob into a number (often represented as hexidecimal), then modulo it (%) to find its index. When it has the index, then the retrieval process becomes like that of an array: the index is now a pointer to place in memory.

The hashing algorithm used in hash functions varies depending on the language. Ruby, for instance, has some differences than the general hashing alogorithm described above. For one, Ruby does not % array_size. Ruby sets a fixed array size of 11 by default, and indexed each hash by % 11. Ruby calls these 11 spots in array "bins".

There will also be instances where hash functions produce the same index. fam.leo might hash into index 2, and fam.bob might also hash into index 2. This is called a collision. Every language has different collision handling. Ruby creates linked lists to handle collisions. Since both leo and bob are at index 2, both bob and leo will be placed there. This linked list is essentially an array that looks like:

[ ["bob", "next is leo"], ["leo", "next is ?"] ]

Now, when fam.leo is called, "leo" is first hashed into 0xff65cc, then % by 11, which returns index 2. At index two there is a linked list. Now Ruby iterates through this list (this is O(n) time complexity at this point) and looks for matches to the string "leo" using .equal?.

When linked lists get longer than 5 items, then it re-runs the hash through a hashing function and makes a larger bin size.

Linked listing is just one way to handle collisions. There is also linear probing, quadratic probing, and also running % array_size as a technique to reduce collisions. In practice most languages use a mix of techniques.

So the conclusion is that if there are lots of collisions in a hash, then in fact the lookup time is not O(1), but closer to O(log n)!

Sources:
https://www.hackerearth.com/practice/data-structures/hash-tables/basics-of-hash-tables/tutorial/

https://stackoverflow.com/questions/4560720/why-does-the-stack-address-grow-towards-decreasing-memory-addresses

https://www.sitepoint.com/diving-into-how-hashes-work-in-ruby/

Optional Chaining in Javascript

tywenk — Tue, 12 Apr 2022 19:34:07 +0000

What is Optional Chaining in Javascript?

Optional Chaining is a new feature of the Javascript language introduced in 2020 that allows for in-line checking of nested object properties. It's a very concise and easy-to-write method that also elegantly allows a program to fail. It avoids the dreaded cannot read property of undefined error message when its tries to access a property of an object that does not exist.

Optional chaining is also known as safe navigation.

Given an object, animals, how would you assign and access a nested value of name in dog?

const animals = {
    cat: {
        name: "marge",
        age: 2,
    },
    dog: {
        name: "bob",
        age: 6,
    },
}

Without optional chaining you would first check to see if dog is a property of animals with a ternary expression:

const name = animals.dog ? animals.dog.name : undefined

This use of a ternary is a valid but a little too lengthy of a way to check for properties as you drill into a object.

With optional chaining, this can be done very efficiently:

const name = animals.dog?.name

Optional chaining syntax is using the ? to check if dog exists as a property of animals. If it isn't, it will return undefined and the object chaining short circuits so that name is never called. If dog does exist as a property of animals, then the program will proceed and attempt to get dog's property of name.

At this point optional chaining does not care if name exists as a property -- and in fact there is not a way to optional chain the end of object drilling. This syntax is incorrect:

const name = animals.dog?.name?.

But this syntax is fine:

const name = animals?.dog

In the following example you can see how elegant it is to sneak in a ? into dot notation chaining, while also ensuring that the program will fail gracefully by returning undefined instead of throwing an error.

const dogName = animals.dog.name

const catName = animals.cat?.name

const duckName = animals.duck?.name

const dogWeight = animals.dog?.weight

console.table({
    dogName: dogName,
    catName: catName,
    duckName: duckName,
    dogWeight: dogWeight,
})

This is what will be logged:

index	Value
dogName	'bob'
catName	'marge'
duckName	undefined
dogWeight	undefined

Beyond searching properties of an object, optional chaining can also be used to check the truthy-ness of object's expressions, array indexes, and function arguemnts.

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

The quirky thing to note is that optional chaining requires both symbols ? and . even in situations when dot notation is not used, such as in accessing an array with an index.

Optional chaining (a.k.a. safe navigation) may have slightly different syntax in different languages. In Ruby, instead of ?. the language uses &. for interesting reasons. In many languages, though, something similar to ? is used.

References:

MDN

FreeCodeCamp

How to Use Nested Routes in React Router 6

tywenk — Tue, 12 Apr 2022 19:31:59 +0000

React Router version 6 makes it easy to nest routes. Nested routes enables you to have multiple components render on the same page with route parity. This is useful for app experiences where you want the user to be able to "drill down" into content and not lose their way, such as in forums or blogs.

Installing React Router

To get started install React Router 6 into your React app. In your app's directory open a terminal and input:

npm install react-router-dom@6

After it's installed, go to the top level component of your app. In my case, I like to leave index.jsx clean and standard, so I put my routes in App.jsx, which is the next highest component.

At the top of App.jsx import the required components:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom".

It is standard practice to import BrowserRouter as Router because BrowserRouter is too long to type!

Basic Routing

From here you can begin to set up your routes. An empty shell of nested routes looks like this, with the outermost component <Router> wrapping a <Routes> (plural!) which then wraps multiple <Route> (singular!):




import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

export default function App() {
    return (
        <Router>
            <Routes>
                <Route>
                    <Route />
                    <Route />
                </Route>
            </Routes>
        </Router>
    )
}

The <Route> component takes in a path and element prop. The path value holds the path of the route. The element value holds a pointer to a component or page.

<Route path='/' element={<Home />} /> is a route that points to a Home component at the base route of https://yourblog.com/.

Let's try and make an Blog app which displays posts in a nested fashion. We want to see a list of post previews in a <Posts/> component. Eventually we want to be able to click a post preview to show a new route of the full post content. We also want to click a button in <Posts/> that will bring up a new post form in the same place as <Post/> Let's start by adding few routes to App.jsx.




import { BrowserRouter as Router, Routes, Route } from "react-router-dom" 

export default function App() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='about' element={<About />} />
                <Route path='posts' element={<Posts />} />
            </Routes>
        </Router>
    )
}

You will have to import the Home, About, and Posts components at the top of your page for this to work.

These separate routes now each point to a different component. These routes are not yet nested. If we were to visit https://yourblog.com/about the webpage would render only what is inside the <About /> component. If we were to visit https://yourblog.com/posts the webpage would render only what is inside the <Posts /> component.

With the above App we have the following routes:

"/"
"/about"
"/posts"

Note that in your path props we don't write /about and instead write about. The forward slash / in path names is implicit in React Router 6.

Nested Routing

But we want nested routes! It's this easy:



export default function App() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='about' element={<About />} />
                <Route path='posts' element={<Posts />}>
                    <Route path='new' element={<NewPost />} /> {/*A nested route!*/}
                    <Route path=':postId' element={<Post />} /> {/*A nested route!*/}
                </Route>
            </Routes>
        </Router>
    )
}

In between a Route component you can embed another Route: <Route>{/* Children routes go here*/}</Route>

Now our route structure looks like this:

"/"
"/about"
"/posts"
"/posts/new"
"/posts/123"

Now we can learn how these nested routes can pass information to each other and ensure they display in a proper "nested" way.

Nesting routes with <Outlet/>

/posts/new points to a page to create new posts. This page will likely contain a controlled form to submit a new post.

When we head to https://yourblog.com/posts/new we will see both the <Posts /> component AND the <NewPost /> component. This is the magic of nesting routes! We are rendering two difference components with one descriptive path on the same page. Super cool!

At this point, if you're following along, you might not see the <NewPost /> component appear. This is because we need to tell the parent component, <Posts /> where to render its children. React Router provides a component called Outlet that renders a route's child component.

A <Posts /> component might look like:



import { Outlet } from "react-router-dom"

export default function Posts() {
    return (
        <div>
            <h1>List of posts go here!</h1>
            <Outlet />
        </div>
    )
}

<Outlet /> behaves a bit like props.children in standard React. <Outlet /> is the placeholder location for where the nested children routes will be rendered.

You might be wondering how to pass props from a parent route to a child route. React Router 6 has a native prop of Outlet called context, which behind the scenes is a React context provider. context accepts an array of states.

In order to for a child route to accept the context, the child component must use React Router's provided hook useOutletContext. This whole getup might look like:



// Posts.jsx, the parent
import { Outlet } from "react-router-dom"

export default function Posts() {
  const [currentUser, setCurrentUser] = React.useState([/*array of post content*/])

    return (
        <div>
            <h1>List of posts go here!</h1>
            <Outlet context={[currentUser]}/>
        </div>
    )
}

//NewPost.jsx, the child
import { useOutletContext } from "react-router-dom"

export default function NewPost() {
  const [currentUser] = useOutletContext()

    return (
        <div>
            <h1>Welcome {currentUser}, write a new post!</h1>
      <form/>
        </div>
    )
}

In order for outlet:

The parent must import Outlet
The parent must embed <Outlet/> with context=[state] in the render
The child must import useOutletContext
The child must destructure the array with useOutletContext(). Order matters, unlike with props and object destructuring.

Now, on to the next nested route, :postId.

Nested Routes and useParams

/posts/123 will display a specific post. Our path prop for this Route is a parameter, dentote by the prefix ":" in the path:

<Route path=':postId' element={<Post />} />

In the <Post /> component we can get the parameter 123 by importing useParams.

import { useParams } from "react-router-dom"

Then in the body of your functional component, call useParams.

let params = useParams()

Now within the scope of the component you can access 123, or whatever post id is passed in the route, by called params.postId.



import { useParams } from "react-router-dom"

function Post() {
    let params = useParams()

    return <h1>{params.postId}</h1>
}

Placeholder Component with Index

Nesting routes can also go deeper than one level. Let's nest another route in <Post /> to display comments.



export default function App() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='about' element={<About />} />
                <Route path='posts' element={<Posts />}>
                    <Route path='new' element={<NewPost />} />
                    <Route path=':postId' element={<Post />}>
                        <Route index element={<PostIndex />} />
                        <Route path='comments' element={<Comments />} />
                    </Route>
                </Route>
            </Routes>
        </Router>
    )
}

Now our route structure looks like this:

"/"
"/about"
"/posts"
"/posts/new"
"/posts/123"
"/posts/123/comments"

As expected, <Comments /> now renders as a child route of <Post />. Of course, now in <Post /> we have to add an <Outlet /> in order to render child routes. This will look something like:

But wait, we added two routes, why is there no path for <PostIndex />?

<Route index element={<CommentEmpty />} /> has no path prop and instead is given an index value.

index declares this route as the default child route to render in the parent's Outlet when there is no other child to render. index is the default placeholder content for an empty path.

In this case, when there is no /comments path, the render will look like:

You could put a clean watermark in here for nicer UX, or put some interesting statistics about the Post, it's up to you! But you have the option to have something there and not some buggy-looking white space.

Navigating Between Nested Routes

Finally, React Router provides a handy way to navigate up and down nested routes.

The library provides a hook called useNavigate() that allows you to develop programatic path changes.

To use it import it at the top of a component where you want a user to be able to navigate out of.

import { useNavigate } from "react-router-dom"

Then instantiate it in the body of the component.

let navigate = useNavigate()

Now you can use navigate({/*options*/}) to render a different route.



import { useNavigate } from "react-router-dom"

function Post() {
    let navigate = useNavigate()

    return (
        <div>
            <button onClick={() => navigate("./")}>Go Back One</button>
            <button onClick={() => navigate("../")}>Go Back Two</button>
        </div>
    )
}

Some useful useNavigate() options include:

useNavigate("./") to go up a nested path
useNavigate(-1) to go back in history, as if the user clicked the back button in a browser
useNavigate("/pathname") to go to a specific path

End

Hopefully this helps you develop some cool nested router apps!

Resources

Helpful blog that goes more in depth:
(https://ui.dev/react-router-nested-routes)

React Router 6 docs:
https://reactrouter.com/docs/en/v6/api