DEV Community: builtbyjosh

What is useParams()?

builtbyjosh — Sun, 12 Sep 2021 21:37:36 +0000

useParams() is part of a set of hooks that ships with react-router-dom along with useHistory, useLocation, and useRouteMatch. It is defined as:

useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current .

But what does it mean and how do you implement useParams() into your React project.

Because useParams ships with react-router-dom, it works directly with your route paths. With useParams, your params have to match the path set in your route:

<Route path=’/users/:username’>

With this route, you are able to access the :username param from the URL. To use this param, you must first import the useParams() hook into your app and create a variable within your component.

Import { useParams } from “react-router-dom”

const App = () => {
    let { username } = useParams();
    return <div>My name is {username}</div>
}

Now you can dynamically change the component based on any URL passed that matches the declared route. This can also be used for API calls. If you have a list of users, you can click one user’s name and fetch all of their information with their name as the search term that is added to the end of the fetch URL.

Using Axios with Async/Await

builtbyjosh — Sun, 05 Sep 2021 23:14:47 +0000

According to MDN Async is defined as:

‘An async function is a function declared with the async keyword, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.’

While inside of an Async function, the use of the ‘Await’ keyword allows for promised-based returning functions to behave like they are synchronous functions. This is accomplished by suspending the execution of the function until the returning promise is either rejected or fulfilled.

Axios is an npm package that utilized promise-based HTTP requests. It can be used as an alternate to the built-in fetch methods.

For these examples, I will be using the jsonplaceholder REST API as an endpoint for the requests. Here is how you perform basic CRUD requests while utilizing Axios and Async/Await

GET:

const getPosts = async () => {
  console.log('GET Request');
  try {
    const request = await axios.get(
      'https://jsonplaceholder.typicode.com/posts?_limit=5'
    );
    console.log(requests);
  } catch (error) {
    alert(error);
  }
};

The getPosts function is defined as an async function at the beginning of the arrow function. From there, the variable request is labeled as an await variable. Then axios.get(url) is used to make the request to the API. All of this is done within a Try/Catch block. This will replace the .catch that is normally present in synchronous functions. You can then console.log the request to display the fetched data

POST:

const addPost = async () => {
  console.log('POST Request');
  try {
    const request = await axios.post(
      'https://jsonplaceholder.typicode.com/posts',
      {
        title: 'New Post',
        body: ‘Some text to put in the body’,
      }
    );
    console.log(request);
  } catch (error) {
    console.log(error);
  }
};

The post request is very similar to the get request. Except you have to change to axios.post to send data to the api. Within the request, the data to be saved must be passed as an object along with the url it is to be posted to.

PUT/PATCH:

const updatePost = async () => {
  console.log('PUT/PATCH Request');
  try {
    const request = await axios.patch(
      'https://jsonplaceholder.typicode.com/posts/1',
      {
        title: 'Updated Post',
       body: ‘Updated body text,
      }
    );
    console.log(request);
  } catch (error) {
    console.log(error);
  }
};

The put/patch is almost identical to the post request. The main difference is the URL has to include the id of the record you are trying to update. Otherwise, you still have to pass the data to be changed along with URL as an object.

DELETE:

const removePost= async () => {
  console.log('DELETE Request');
  try {
    const request = await axios.delete(
      'https://jsonplaceholder.typicode.com/posts/1'
    );
    console.log(request);
  } catch (error) {
    console.log(error);
  }
};

In a delete request, you no longer have to pass along any extra data as an object. You simply have to specify the record you are deleting with the URL.

Two ways to solve Fibonacci

builtbyjosh — Mon, 30 Aug 2021 03:43:09 +0000

A very common question that you may come across during a coding interview is to find the Fibonacci sequence with a given number. The Fibonacci sequence is a set of numbers that starts with a one or a zero, followed by a one, and proceeds based on the rule that each number (called a Fibonacci number) is equal to the sum of the preceding two numbers. If the Fibonacci sequence is denoted F (n), where n is the first term in the sequence, the following equation obtains for n = 0, where the first two terms are defined as 0 and 1 by convention:

F (0) = 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 …

So during the interview, you will be asked:

Given a number N return the index value of the Fibonacci sequence, where the sequence is:
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …

After a quick look, you can easily notice that the pattern of the sequence is that each value is the sum of the 2 previous values, which means that for N=5 → 2+3 or in maths:
F(n) = F(n-1) + F(n-2)

The easiest way to accomplish this is with a simple loop:

let fibonacci = (num) => {
    let a = 1;
    let b = 0;
    let temp;

    while ( num >= 0) {
        temp = a;
        a = a + b;
        b = temp;
        num--
    }
    return b;
}

With this solution, we calculate the next number by adding the current number to the old number. And this gives you an O(n) time complexity. But there is a faster approach to the problem. And that approach is called recursion.

let fibonacci = (num) => {
  if (num <= 1) return 1;
  return fibonacci(num - 1) + fibonacci(num - 2);
}

With the recursive function, we go to an O(2^n) time complexity. So we have increased the complexity exponentially. But we are able to solve the question in only 3 lines code.

Quick look at useState()

builtbyjosh — Mon, 23 Aug 2021 00:00:43 +0000

Another powerful function that is becoming very popular with functional components is the useState hook. The useState hook allows you to share state with functional components. With this hook, you can quickly add state to a function component without having to convert it to a class component.

The way you would normally declare state in a class component would look like this:

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0;
        };
    };
};

A constructor class is required to create the initial state in a class component. This leads a lot of boiler plate code and what could be written in just a couple lines is now almost 10 lines. To do the same thing with a functional component and the useState hook, you must first import the hook into you file and then declare the state as a new variable:

import React, { useState } from ‘react’;

const example = () => {
    const [count, setCount] = useState(0);
};

In this example we declared the new variable as count and set it to 0. We then created a setter variable called setCount so we can reference the state and manipulate it later. Normally in a class component, state is changed like this:

this.setState({ count: this.state.count + 2 });

But since we created a setter variable, you change the state like this:

setCount(count+2)

Since useState is used inside of a functional component, you also access the saved state slightly differently. Within a class component, you would call it with ‘this.state.count’ but within the functional component, you only have to reference ‘count’.

Just like with class components, you can set many different state variables using useState, you just have to follow the same pattern as the first state variable declared.

const [car, setCar] = useState('chevy');
const [snack, setSnack] = useState('cookies');
const [todo, setTodo] = useState({text: 'Take out trash'})

You can set the value of the state to any normal variable type in react. Strings, booleans, numbers, even objects. So as you can see the useState hook allows you to quickly switch to functional components and avoid using Redux. This can cut down the amount of code you have to write as well.

What is useHistory()?

builtbyjosh — Mon, 16 Aug 2021 01:17:38 +0000

Another great hook that is available to React is the useHistory() hook. This hook gives you access to the history object from react-router-dom, which you can use to navigate. The useHistory hook then allow you to set navigate programmatically to other routes in your application by using push and replace methods.

To use this hook, you will first need to install react-router-dom.

npm install react-router-dom

Once installed, you will need to import useHistory into your app and create a history variable.

Import { useHistory } from ‘react-router-dom

const history = useHistory()

With the history variable created, you can now “push” routes to the history object. This will cause your application to navigate to that pushed location. This is usually handled with a function that can attached to the onClick event on a button or link

const goHome = () => {
    history.push(“/”)
}

<button onClick={goHome}>Home</button>

Now, when the home button is clicked, your app will redirect to the component that is set to the “/” route. Besides the import call, all of this will need to be created inside of the functional component. And as a whole, it may look something like this:

import { useHistory } from 'react-router-dom';

const App = () => {
    const history = useHistory();

    const goHome = () => {
        history.push("/");
    }

    return (
        <div>
          <h1>Hi there!</h1>
          <button onClick={goHome}>Home</button>
        </div>
    );
};

JS DS&A Palindrome

builtbyjosh — Sun, 08 Aug 2021 23:24:11 +0000

A very common JavaScript algorithm you may come across is to check if a string is a palindrome. This means that the word is spelled the same forwards and backwards. Take the word 'racecar' for example. If you reverse the string, it will still say 'racecar' and is therefore considered a palindrome.

This blog post will cover two different methods for checking if a string is a palindrome. The first method will utilize built-in functions. The second method will use a for loop.

So we will start with an empty function that has a 'str' passed to it that will represent the word we are checking.

const isPalindrome = (str) => {

}

The First Method:

We will begin by converting the string into an array by using the split() method to break apart the word into individual letters. Then save that to a variable called strArr.

let strArr = str.split('')

Next we will use the reverse() method to reverse the array of letters. And this will be saved to a variable called revArr

let revArr = strArr.reverse()

With the array of letters reversed, we now have to join it all back together using the join() method and save that as revStr.

let revStr = revArr.join('')

Once that is complete, it is time to check if revStr and str are the same and return true or false.

return (str === revStr)

The final function will look like this:

const isPalindrome = (str) => {
    let strArr = str.split('')
    let revArr = strArr.reverse()
    let revStr = revArr.join('')
    return (str === revStr)
}

JavaScript also allows you to chain together methods that can reduce the amount of code you have to write. So we can shorten this to:

const isPalindrome = (str) => {
    let revStr = str.split('').reverse().join('')
    return (str === revStr)
}

The Second Method:

This will start off with the same empty function as before with a 'str' passed into it. But we will start by declaring two variables, and empty string and empty array.

let arr = []
let revStr = ''

Now we will use a for in loop to extract each letter from the 'str' and push that letter to the empty array.

for (letter in str) {
    arr.push(str[letter])
}

Next we will use the same loop, but instead of pushing each letter to an array, we will use 'str' as a counter. We will then pop off the last element of the array and save it to 'revStr'.

for (letter in str) {
    revStr += arr.pop()
}

Now we can just check equality between the original 'str' and 'revStr'

return (str === revStr)

All together, the function would look like:

const isPalindrome = (str) => {
    let arr = []
    let revStr = ''
    for (letter in str){
        arr.push(str[letter])
    }
    for (letter in str){
        revStr += arr.pop()
    }
   return (str === revStr)
}

One problem you might run into with this is if the word is capitalized. So while racecar === racecar, Racecar != racecaR.

The easiest way to fix this issue is to manipulate the 'str' so that all letters are lower case using JavaScripts toLowerCase() method.

Within the function you would need create a variable called 'lowerStr' and save the 'str' with all lower case letters to it.

let lowerStr = str.toLowerCase()

Then anywhere in the function where you are calling 'str', replace it with 'lowerStr' and that should take care of capitolization.

What is useEffect?

builtbyjosh — Mon, 02 Aug 2021 01:58:36 +0000

Hooks have become the greatest thing since sliced bread when it comes to programming React components. Everyone has heard of the useState hook. It is one of the biggest selling points of using hooks in React. But another main hook that is available to programmers is called useEffect. But what does it do? How does it help us programmers? And more importantly, how do we use it?

The useEffect hook lets you perform side effects in function components. These side effects are usually a function that is passed into the useEffect hook. You can do many things inside of the useEffect hook actually. One of the most common would be to perform data fetching by connecting to an API and saving the returned data to a variable.

useEffect(()=>{
    console.log(“side effect”)
});

This hook is how you would add lifecycle events, such as componentDidMount, to a functional component. However, the entire lifecycle can be handled within one useEffect hook. There is no need to create the componentDidUpdate or ComponentWillUnmount. So you will have less repeat code in your component.

Sometimes you only want your component to rerender at specific times. To help with this, you can pass an optional second parameter into the useEffect hook. This second parameter is an array. This will only allow a rerender of the component if the array changes. Keeping the array empty will limit the render to only when the component mounts.

useEffect(()=>{
    console.log(“side effect”)
},[]);

The useEffect hook makes it very simple for a developer to create side effects in components without using several different lifecycle methods. You can also use this hook many times in your components. This will help separate unrelated logic and keep your code specific.

Redux Thunk

builtbyjosh — Sat, 12 Jun 2021 20:15:28 +0000

What is thunk? Thunk is one of the most common redux middleware packages for redux. What is middleware? Middleware has the ability to stop, modify, or otherwise mess around with actions. There are plenty of middleware packages available, and they are mostly used for dealing with async actions. That is where thunk comes into play!

It is mainly used for asynchronous data calls. You can delay the dispatch of an action until all of the desired data is retrieved or the returned function has been called and completed its task. An example would be making a GET request to an outside API, you will need to wait for all of the data to be returned before you dispatch the action associated with the request. Or else you will run into errors when trying to render your components.
Normally, action creators can only return objects. But with redux-thunk, they can return functions to the action creators. When a normal object is passed to the action creator, it will carry out the action right away. But if a function, ie a fetch to an outside API, is called, thunk will call that function asynchronously. Once the promise is resolved, thunk will pass the returned value to the action creator.

The main way to use redux-thunk is to apply it when your redux store is created. You will first need to install redux-thunk to your app by using the command:

npm install --save redux-thunk

Once thunk is installed, you will need to import it into your app. As well as importing createStore and applyMiddleware from the redux package.

import { createStore, applyMiddleware } from 'redux
import thunk from 'redux-thunk';

Once all of these files are imported into your component, you will be able to create your redux store using:

const store = createStore(
    yourReducer,
    applyMiddleware(thunk)
):

Make sure to import your reducer to the file where you are creating your store. This will connect your store and reducers to thunk and allow you to make asynchronous calls.