 Resources from Ryan Harris in 2024

In this collection, we'll go through each of the standard hooks offered by the React library, learn how they work and build small applications that leverage them internally.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

React Hooks: Revisited

SSH provides a secure way for your to [connect to and authenticate with GitHub's servers](https://help.github.com/en/github/authenticating-to-github/about-ssh). While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like [`ssh-keygen`](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) and then associated with your GitHub account using the public key.

In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have [separate accounts for personal and professional projects](https://ryanharris.dev/managing-ssh-keys-for-github/), which can be difficult to manage manually. Using `ssh-agent` and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's `git` URL.

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Secure GitHub connections with SSH

Build an NFT Based Ticketing System

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Using the [GitHub CLI](https://github.com/cli/cli) and a shell script, we will automate the process of monitoring pull requests in repositories we maintain. Specifically, open PRs we have created and those awaiting our review.

Monitor Pull Requests with the GitHub CLI

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

The `useMemo` hook is a performance optimization in React which leverages "memoization" under the hood. Memoization is essentially an internal caching mechanism that allows functions to avoid re-computing expensive values when receiving the same inputs.

`useMemo` has the same function signature as `useEffect` and `useLayoutEffect` because it also takes a function and optional dependency array as its arguments. Unlike those hooks, however, the value returned by `useMemo` is a memoized value.

**Note:** The React documentation suggests that you implement your logic with `useEffect` first to make sure your application works. Then, you can go back and refactor with `useMemo` to improve app performance.

```jsx
// Hook runs whenever the value of 'a' or 'b' change
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

// Receiving input for the first time returns a newly computed value
computeExpensiveValue(1, 2)

// Receiving the same input arguments returns a cached value
computeExpensiveValue

Optimize React Component Performance with useMemo

Similar to `useMemo`, the `useCallback` hook also uses memoization internally in order to improve application performance. The difference is the type of value the two hooks return: while `useMemo` returns a memoized value, `useCallback` returns a memoized function.

This allows you to create memoized functions and pass them as props between components without having to repeatedly define the caching mechanism in order to avoid expensive, repetitive computations:

```jsx
// Returns a memoized function
const memoizedFunction = useCallback(() => {
	// Define function logic
}, [data])
```

Create a Memoized Function with React useCallback

Normally, you would use `useState` to store values in your function components. However, when your state value is a complex data object or is comprised of a number of related values, you may want to use `useReducer` instead. This hook allows you to avoid having numerous state hooks and, instead, consolidate your values.

Like `useState`, the array returned by the hook contains two values: your current state and a dispatch function which allows you to update the state. When instantiating the hook, you'll need to pass it two arguments, a reducer function and your initial state. Similar to patterns used in libraries like Redux, when you dispatch an action the reducer function body will determine how to update the internal state.

This is the function signature of the `useReducer` hook:

```jsx
const [state, dispatch] = useReducer(reducer, initialState)
```

Build a Form with useReducer in React

The `useDebugValue` hook will not effect your user experience but is instead aimed at improving the developer experience. When building your own custom hooks, `useDebugValue` can help you debug the hook's internal logic by displaying values in the React Dev Tools.

The hook takes two arguments: a value to be displayed in the developer console and an optional function you can use to format the aforementioned value. The function signature looks like this:

```jsx
const name = 'ryan'

// Outputs 'ryan' to the developer console
useDebugValue(name);

// Outputs 'RYAN' to the developer console
useDebugValue(name, (name) => name.toUpperCase());
```

Debug Custom React Hooks With useDebugValue

Let’s display a user’s NFT ticket in our dApp. 

Using Axios, we can make a call to OpenSea’s API, passing in the user’s address and the smart contract address as params.

Display a User's NFTs Using the OpenSea API

Ethereum is a decentralized, open-source blockchain with smart contract functionality. 

ethereum

We want to update the “Checked In” property on our NFT tickets once a user checks in with our dApp. 

To accomplish this we create `checkIn` method in our smart contract. To write `checkIn` we can just copy and paste a large portion of our `mint` method and remove the call to `safeMint`, set the id to the user’s token, set Checked In to `true`, and replace the placeholder image with our IPFS image.

Update an NFT’s Image and Other Metadata

A placeholder image isn’t going to cut it for our awesome NFT tickets. 

We can upload our own images to IPFS at [https://www.pinata.cloud/](https://www.pinata.cloud/)

Upload Static Assets to IPFS with Pinata

To confirm ownership we first have to add a `confirmOwnership` method to our smart contract and redeploy it. 

Then, we can call that `confirmOwnership` method on the connected smart contract within a `useEffect` hook in our React dApp.

Confirm a Wallet Owns an NFT in a Smart Contract

With the `QrReader` component from `react-qr-scanner` library, scanning a user’s wallet QR code is straightforward. 

We first make sure that the QR reader can be open and closed in the UI. Then using the `onScan` prop on `QrReader`, we get the wallet address from the QR code and add it to local state.

Scan an Ethereum Wallet's QR Code

Time to set up our dApp to actually mint an NFT when the buy button is clicked. 

`.mint` is called on our `connectedContract` with an object containing a `value` property. The value property is the NFTs cost in gwei. 

Then to polish everything up, we’ll add a loading state, and link the user to the transaction on Etherscan using `useToast`

Mint an NFT from a React dApp

It’s helpful for users to know how many NFTs are currently available and how many there are total.  

This information can be found on the smart contract. In our dApp we can get it off our `connectedContract`, stored locally in React state, using the `totalTicketCount` and `availableTicketCount` methods.

Fetch Mint Info From a Smart Contract

We need to give the owner of the smart contract the ability to open and close an NFT sale in the React dApp UI. 

We’ll use the `.openSale` and `.closeSale` methods off of the `connectedContract` stored in React state. Then for the best possible experience we’ll create a pending state while the sale is opening or closing. During the pending state the buttons will be disabled. 

Then we’ll bring in `useToast` from chakra-ui to give a message depending on if the opening/closing of the sale was successful or not.

Open and Close an NFT Sale From a React dApp

We don’t want any user to be able to access admin pages. Let’s check if the user’s wallet address matches the address of our connected smart contract. 

This can be done by using OpenZeppelin to get the owner address from the smart contract, then comparing that to the currently connected address.

Fetch the Owner's Wallet Address From a Smart Contract

Now it’s time to connect your dApp to your smart contract on the Rinkeby test network. 

You will copy over the `nfTixBooth.json` file from the smart contract project. Then, using the `ethers` library, you’ll connect to the smart contract.

Connect a React dApp to a Smart Contract Using ethers.js

Since we are storing the user’s wallet address in React state, it is lost when the dApp is reloaded. To fix this, we’ll cache the address in localStorage. 

We’ll use the `useEffect` hook to look for an address in localStorage if there isn’t one in local state.

Cache a MetaMask Wallet Address in localStorage

Users should also be given the option to disconnect their wallet from your dApp.

There isn’t a programatic way to accomplish this, but we can remove their wallet address from state, adjust the UI, and use `react-router` to navigate them to root in order to provide a clear UX.

Disconnect MetaMask from a React dApp

We need a way for our user’s MetaMask wallets to connect to our dApp. We can accomplish this with the `ethereum` object that MetaMask injects into the browser’s `window`. 

When the user connects we’ll save their wallet address as state using the `useState` hook.

Topics

Instructors

Content Type

Ryan Harris