Forem: Toby

React 19: The new updates

Toby — Mon, 29 Jul 2024 03:42:56 +0000

This week, we will be talking about the new React 19 updates and hooks. Having gone through and using some of these new updates, I can only agree that it has simplified some of the rigorous activities developers go through when building apps, especially interactive form-related applications.

Join me and let us explore some of these new updates.

React Compiler: The React compiler picks your React code, translates it into a JavaScript code for the browser, and manages the state of your component or User Interface. This singular action helps to optimize the performance of your application.

If you are familiar with the useMemo hook, useCallback hook, and the React.Memo, you will understand that they help memoize (storing of values or functions for future uses) your components, so they don't have to re-render when there are no state changes. When there are changes in state, React re-renders the component in question, and its children, and when there are no changes in your code, the component stays as is keeping the previous memory, value and state in the component or hook for future uses; thereby optimizing the performance of your components. This is exactly what the React Compiler does automatically, without having to call any of the aforementioned hooks manually.

Form Actions: One of the biggest advantages of using React is the management and mutation of state, and this mostly happens when we use elements. Forms help us create and handle user interactivity more effectively.

With form actions, you don't need event handlers like onSubmit and onChange to effect live mutation of data, instead we can pass an action prop to the

element which receives a function that triggers the event.

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

<form action={myFunction}>
   <input type="name" 
          name="name" _// this is important to be able to get our data //_
   />
   <button type="submit">Submit</button>
</form>

With this approach, we don't need the application of useState to mutate data through event.target.value, Instead, in myFunction we can get the mutated data through an argument.

It means from the element in our form, we have to set a name attribute. Using this method means we allow React handle the form itself through the Native React form Object instead of manually changing state through event handlers.

Server Components: React 19 allows for components to be rendered on a server before bundling, in a separate environment from the client application or SSR server setup. The Server components are not the same as SSR (server side rendering), but a separate server environment in React Server Components.
This feature allows for components to pre-render before time, thereby resulting in fast content displays and improved load time.

Metadata: React 19 allows for a flexible metadata. Developers can manage the title, description and other meta tags of individual components through the DocumentHead component. This will help to improve SEO (Search Engine Optimization).

Const AboutUs = () => {
 return (
    <>
      <title>Learn more about our company</title>
      <meta name="AboutUs" description="You can find us on ..." />
      // content
    </>
  );
}

React 19 has a series of new hooks, some, new, others an improvement to existing hooks. Let's discuss about them below.

The use() hook: The use hook is an experimental API that can directly be used to read the value of a Promise or context within a component or hook (which is its only known limitation for now).
The use hook is very versatile and can also be used in place of useEffect, as It can be used for asynchronous data fetching. This helps to
achieve a neater and concise code block.

Caveat: It is not a replacement for useEffect because it still has its own limitations that _useEffect _will execute without limits.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    <div className='username'>{user.name}</div>
  );
}

useActionState(): This is a new hook that helps to manage state changes. It helps to manage pending state, error handling, and final
state updates. The useActionState _works like the _useReduce _in that it receives two(2) parameters: the function to be called when the form is submitted, and an _initialState, and it returns an array containing three(3)values: the state, which is now the current state if there is a mutation of state, a new action(formAction) that can be passed as a prop in our form component to call the server action, and _isPending _that returns a _boolean _value if or not the form is submitted.

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState + 1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    <form>
      <button formAction={formAction}>{state}</button>
    </form>
  )
}

From this example, the incrementFunction adds 1 to the state every time the button is clicked. The initialState being 0, and then increases to 1 at the first click of the button, thereby changing the state to 1, and for every other click on the button adds 1 to the last state of the component.

useOptimistic() hook:

This is a new hook that allows users to see the outcome of their action even before the pages load completely. The pages are optimistically rendered to the user even when the server is still in its data fetching mode.

With the hope that data fetching will be successful, React displays the intended result to the client, and when data fetching fails, React reverts to the value of the previous state in order not to display incorrect data. This singular action helps in a seamless and fast display of data thereby improving user experience.

useFormStatus():

As the name implies, useFormStatus gives us the status of our form or form fields. This hook does not take in any parameter, but it sure returns 4 objects:

pending: This returns a boolean value: true or false. It returns true when the form is submitting, and false when the form is submitted.

data: When the form is successfully submitted, we can get the information of the user or object from the form field like this:

(formData.get("name"))
(formData.get("address"))

method: The default method of a form is GET, unless stated otherwise. We can get the method of our form with .method. When we are submitting a form, a string method property should be specified as a POST.

action: This is a reference to the function that will be passed to the action prop in our element.

The useFormStatus must always be called from a element or a component that is rendered inside a .

There's quite a few more updates that I can't really write about, so you don't get bored having to read so much. You can click on the React Docs Website to check out some of the other updates.

I hope you had a great time learning with me.

Do well to follow me if you enjoyed my articles.

Thanks, and have a great week ahead my friends.

useMemo

Toby — Thu, 20 Apr 2023 14:52:22 +0000

Optimizing your application to increase performance should be the goal of every developer. Like me, I know a lot of internet users would rather shut down their computers than deal with a slow website that takes too much time to load its contents. The performance of an application is one of the things that endear users of it.

In today's tutorial, we will be discussing how to use React Hook to achieve a performance-driven application.

In React, when we talk about performance-oriented applications, we talk about useMemo. These hooks help us to memoize values or functions so we don't get to repeat these operations thereby causing a re-rendering in our application. Now let's dive into each of these hooks.

useMemo

This is the React hook that helps us improve the performance of our application. When the performance of an application improves, the speed improves alongside. useMemo memoizes an application's operation.
In this context, when an operation is performed, useMemo stores the output or value of that operation, caches it and returns the output whenever the same operation is performed again. Instead of having to repeat the operation, useMemo just returns the output stored in the previous operation provided any of the values used in computing that operation does not change. This way, you don't have to repeat the operation over and over, thereby increasing the performance and speed of that application.

As a storekeeper whose tradition is to take stock of goods after the close of work for the day. If at the end of the next business day, no good was sold or restocked, will you have to take another count or just use the previous day's numbers? Your guess is as good as mine; use the previous day's numbers. That's the same thing useMemo does for us. Instead of having to perform the operation all over, it presents the previously stored output.

How to use useMemo

useMemo takes in two (2) arguments: the function calculating the value that will be stored and the dependencies.

import React, {useMemo} from 'react'

const memoValue = useMemo(memoFunction, dependencies)

The memoFunction here is the function that will perform the operation whose output will be cached. It has to be a pure function with no arguments. When the component first renders, the memoFunction's output will return. On subsequent renders, if the dependencies do not change, the initial output will keep returning, but once the dependencies change, React will call memoFunction, store the output so it can be used later and then return the output.

The dependencies on the other hand are the variables, state or props used in the memoFunction. These dependencies are the values that make up the output of the memoFunction.

Example without useMemo

import React, {useState} from 'react'

const UsememoTutorial = () => {

    const [input, setInput] = useState(0)

     const [counter, setCounter] = useState(0)

    const memoFunction = (input) => {
        console.log("we are running a square root");
        return input * input
    }

    const memoValue = memoFunction(input)

    const count = (e) => {
        setCounter(counter + 1)
    }
  return (
      <div>
          <input type='number' value={input} 
           onChange={(e) => setInput(e.target.value)} />
          <h3> Square root of your input is: {memoValue}</h3>
          <hr />
          <div>
              <h3>Counter count is: { counter}</h3>
              <button onClick={count}>Counter</button>
          </div>
    </div>
  )
}

export default UsememoTutorial

We have 2 states in our component. Also, in our function (memoFunction), we have a message that gets logged to the console whenever any of the states change. You can try the code and you'll see for yourself. Next, we will see what the reactions look like when we memoize our function.

Example using useMemo

import React, {useMemo, useState} from 'react'

const UsememoTutorial = () => {

    const [input, setInput] = useState(0)

    const [counter, setCounter] = useState(0)

    const memoFunction = (input) => {
        console.log("we are running a square root");
        return input * input
    }

    const memoValue = useMemo(() => memoFunction(input), [input])

    const count = (e) => {
        setCounter(counter + 1)
    }
  return (
      <div>
          <input type='number' value={input} 
           onChange={(e) => setInput(e.target.value)} />
          <h3> Square root of your input is: {memoValue}</h3>
          <hr />
          <div>
              <h3>Counter count is: { counter}</h3>
              <button onClick={count}>Counter</button>
          </div>
    </div>
  )
}

export default UsememoTutorial

Now, there is a bit of a difference in the code. We memoized the function (memoFunction) and used our input state as a dependency. The message in our console only gets logged when the input changes, and not when you click the button to increment the counter.

I am sure you are thinking, this looks exactly like useEffect, but well maybe yes, but not entirely. I'll explain a better scenario where you'll see a whole lot of difference between useMemo and useEffect.

When to Use useMemo

When you calculate the value of a variable or function, useMemo helps store up the output so you don't have to recalculate this same operation all over again when you have to. When you need this same value, it presents it to you.

If you've read other articles on this topic, I'm sure you'd have come across, a lot of places where it was made mentioned as the hook for expensiveCalculations. What that means is useMemo is used to optimize the performance of your application when you are working on a large project. If the project is small, don't use it because you'd probably not see so much of an effect, but the effect, speed and performance are glare when on a large application.

Imagine working on a social app that consumes resources at scale and where the application renders per second because of its large number of users. Leaving your application bare to re-render every second might lead to a performance problem that could crash the app. Memoizing the function responsible for this could be a great deal for the app to increase its performance level.

Summary

useMemo helps you increase the performance and speed of your application. And it is most effective when it's being used on a large application; there the effect on your application is obvious compared to using it on just a few lines of code. It helps to eliminate having to repeat yourself by doing the same calculation over and over. It just presents you the output of the last render when all the values remain unchanged.

Thanks for reading through even though I know it was a long read. Hope it was helpful and educative.

Do have a great day.

React Series: useReducer

Toby — Sat, 15 Apr 2023 17:53:23 +0000

useState hook as we discussed in one part of the series, helps in handling state management. However, useState is used for simple state management. When the state gets complex, it becomes uneasy to manage and can get quite confusing.

In useState, we all know that the state, callback, and rendering are all in the body of the component. Now, imagine if we have to manage several form input states in our React application with different logics for each, the component gets larger, bulky and error-prone. This type of situation can break our application at the slightest update or refactoring of code. This is when the useReducer() hook comes to play.

In this tutorial, I will elaborate on the useReducer hook: what it does, how it works and other related questions that may pop up in your mind.

useReducer()

useReducer is the hook that helps you add a reducer to manage state in your component. Are you thinking "What is a reducer _" ?. A _reducer is a function that helps you update the state. You don't get it still? Don't worry, we are in this together. As we dive deeper, you'll get a full understanding of this hook and the different concepts around it.

The hook is just like the useState() hook, only that it helps manage complex state situations. When you have to manage several states, the useReducer() offers a more robust environment to manage the logic of your state.

While in useState, the whole body of work: logic, rendering etc is lumped into the component, useReducer offers a different playing field for each aspect of the component. With this, it's easier to read the code, manage the state and render the component. As we dive deeper into the course, you will understand it a bit further than it sounds now.

Now, let's move on to the technicalities of our discussion.

Important Concepts to Note

Honestly, you'll come across some concepts and words that may likely sound strange to you, but believe me, they aren't too difficult to grasp as they sound. You'll come across them in every step of your state management with useReducer.

Like useState() where you declare a state in an array. The first being the initialState and the second being the updater function.
const [state, setState] = useState("").

With useReducer, it isn't much different. To declare a reducer, you do this:

import React, { useReducer } from 'react'

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

Now, let's discuss these concepts and arguments.

state: This is the current state. It is where the initialState is triggered at the first render.
dispatch: This is the function that helps you update your current state from its initialState to a new value. It fires the action type that was declared for the update. Once this is done, the component re-renders as the state has been updated.
reducer: This is the reducer function that specifies how the state is updated. It takes in two arguments: state and action. The state is the current state in question while the action is the type of activity that will be performed to update the state. I know this is a bit hard to grasp, but I'll explain with a counter app for a better understanding.
initialState: This is the initial state. It usually comes as an object holding the initial value of the state.

Now, let me use a simple counter app to explain these concepts, as I do realize it wouldn't be easy to grasp without a visible example. Let's get into it.

import React, { useReducer, useState } from 'react'

const initialState = 0
const reducer = (state, action) => {
    switch (action) {
        case "add":
            return state + 1;
        case "subtract":
            return state - 1;
        case "reset":
            return initialState;
        default:
            throw new Error("Invalid action")
    }
};

const Test = () => {
    const [state, dispatch] = useReducer(reducer, initialState)

  return (
     <div>
      <h2>{state}</h2>
      <button onClick={() => dispatch("add")}>
        add
      </button>
      <button onClick={() => dispatch("subtract")}>
        subtract
      </button>
      <button onClick={() => dispatch("reset")}>
        reset
      </button>
    </div>
  )
}

export default Test

In our counter app, we can see all the concepts and arguments I explained earlier in play. They all fit in one place or the other carrying out their function in making sure the app works as it should.

Let's start from the top of the code.

We can see the initialState being initialized. In most cases, it usually comes as an object, but in our case, it is a number. It all depends on the type of state or operation you're trying to update. Instead of having to initialize the initialState to a value of 0 at the top of the code, this would work too;
const [state, dispatch] = useReducer(reducer, 0).

Next, the reducer function. It took in two (2) arguments: state and action. The state being the initialState, and the action being the type of operation we intend on carrying out on our counter app. We can see several action types(add, subtract, reset) that we could carry out on the application.

Then in the JSX, we can see the dispatch rolling out our action types in the button to update the state of our counter.

Now, I am going to refactor the code so you can choose what way to write it. It all depends on your choice.

import React, { useReducer, useState } from 'react'

const initialState = {count:0}
const reducer = (state, action) => {
    switch (action.type) {
        case "add":
            return {count: state.count + 1};
        case "subtract":
            return {count: state.count - 1};
        case "reset":
            return {count: initialState.count};
        default:
            throw new Error("Invalid action")
    }
};

const Test = () => {
    const [state, dispatch] = useReducer(reducer, initialState)

  return (
     <div>
      <h2>{state.count}</h2>
      <button onClick={() => dispatch({type: "add"})}>
        add
      </button>
      <button onClick={() => dispatch({type: "subtract"})}>
        subtract
      </button>
      <button onClick={() => dispatch({type: "reset"})}>
        reset
      </button>
    </div>
  )
}

export default Test

You can copy the code and try it out. It works just fine.

When to Use useReducer

As I discussed at the beginning of the tutorial, useReducer is best applicable when you have multiple or complex state situations. I will show an example of a form where we need to add a new user to our list of users. I'll show a useState case and then apply the useReducer case.

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

const Test = () => {

    const [name, setName] = useState("")
    const [age, setAge] = useState()
    const [address, setAddress] = useState("")
    const [occupation, setOccupation] = useState("")
    const [maritalStatus, setMaritalStatus] = useState("")

    const handleForm = (e) => {
        e.preventDefault();
        setName(name)
        setAge(age)
        setAddress(address)
        setMaritalStatus(maritalStatus)
        setOccupation(occupation)
    }   
  return (
      <div>
          <form onClick={handleForm}>
              <h3>Employee Information</h3>
              <div>
                  <label htmlFor='name'>Name</label>
                  <input type='text' value={name} 
                   onChange={(e)=> setName(e.target.value)}/>
              </div>
              <div>
                  <label htmlFor='age'>Age</label>
                  <input type='number' value={age} 
                   onChange={(e)=> setAge(e.target.value)}/>
              </div>
              <div>
                  <label htmlFor='address'>Address</label>
                  <input type='text' value={address} 
                   onChange={(e)=> setAddress(e.target.value)}/>
              </div>
              <div>
                  <label htmlFor='occupation'>Occupation</label>
                  <input type='text' value={occupation} 
                   onChange={(e)=> setOccupation(e.target.value)}/>
              </div>
              <div>
                  <label htmlFor='maritalStatus'>maritalStatus</label>
                  <input type='text' value={maritalStatus} 
                   onChange={(e)=> setMaritalStatus(e.target.value)}/>
              </div>
              <button>SUBMIT</button>
          </form>
    </div>
  )
}

export default Test

This is a typical form using useState. In this form, we have 5 state values that need to be updated. You can see how clogged the component is.

Now we are going to use the useReducer approach below to update our states, and you can have a clearer understanding of the slightest reason why this may be better.

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

 const formState = {
        name: "",
        age: "",
        address: "",
        occupation: "",
        maritalStatus: ""
    }

    const employeeReducer = (state, action) => {
        switch (action.type) {
            case "addNewName":
                return {
                    ...state, name: action.payload
                }
            case "addNewAge":
                return {
                    ...state, age: action.payload
                }
            case "addNewAddress":
                return {
                    ...state, address: action.payload
                }
            case "addNewOccupation":
                return {
                    ...state, occupation: action.payload
                }
            case "addNewMaritalStatus":
                return {
                    ...state, maritalStatus:action.payload
                }
            default:
                return state;
        }
    }

const Test = () => {

    const [state, dispatch] = useReducer(employeeReducer, formState)

    const handleForm = (e) => {
        e.preventDefault();
        console.log(state);
    };


  return (
      <div>
          <form>
              <h3>Employee Information</h3>
              <div>
                  <label htmlFor='name'>Name</label>
                  <input type='text' name='name' value={state.name}
                      onChange={(e) => dispatch({type: "addNewName",             payload:e.target.value})} />
              </div>
              <div>
                  <label htmlFor='age'>Age</label>
                  <input type='number' name='age' value={state.age}
                       onChange={(e) => dispatch({type: "addNewAge", payload:e.target.value})} />
              </div>
              <div>
                  <label htmlFor='address'>Address</label>
                  <input type='text' name='address' value={state.address}
                       onChange={(e) => dispatch({type: "addNewAddress", payload:e.target.value})} />
              </div>
              <div>
                  <label htmlFor='occupation'>Occupation</label>
                  <input type='text' name='occupation' value={state.occupation}
                       onChange={(e) => dispatch({type: "addNewOccupation", payload:e.target.value})} />
              </div>
              <div>
                  <label htmlFor='maritalStatus'>maritalStatus</label>
                  <input type='text' name='maritalStatus' value={state.maritalStatus}
                       onChange={(e) => dispatch({type: "addNewMaritalStatus", payload:e.target.value})} />
              </div>
              <button onClick={handleForm}>SUBMIT</button>
          </form>
    </div>
  )
}

export default Test

I know you are thinking this method is much bulkier than using useState. Yes I agree, It's just an easier way to separate code into smaller chunks. There will arise times when you have to deal with much more state than these five and you'll find this method easier to update each state in real-time.

If you find this tutorial helpful, don't forget to follow me and like it. There are other parts of the React series on my page, you can go through them for your learning benefits.

Have any questions? Feel free to hola at me.

Please enjoy your weekend friends.

Context API and useContext

Toby — Sun, 09 Apr 2023 13:00:00 +0000

Props help you pass down data from parent to child components. By so doing, it's using the flow system of data passage (top to bottom) to get that done. However, when the project grows, it becomes more complex using props to pass down data from one component to another that is not directly a child of it, or where the said component is deeply nested in the application.

Sometimes, the components in-between the parent and the child component may not need this information but they are obliged to pass it down until it gets to the component that needs it. This can be a heck of a problem and this is where you need the ContextAPI().

What is ContextAPI

The ContextAPI helps you pass props or state through the component tree without having to do it manually. It helps you pass information from the parent component to several other components in the application no matter how deeply nested they are. With useContext, the information tunnels through from the parent component to the component that needs it through the use of context. It helps solve the prop drilling problem encountered in React state management.

Some types of data are too complex to be shared through props. Data such as Auth and theme can be passed through context without compromising your application.
ContextAPI is an in-built React library so you don't need to bother about increasing your build size or having to install a third-party library.

With useContext, any component that needs information or prop from the parent component can easily ask for it and have access to it right away with the use of context.

Prop-Drilling

Prop-drilling is the process of passing props from a parent component down to child components no matter how deeply nested they are. The passing of data is done manually from component to component until the desired component is reached.

Below is a diagram and an example of prop-drilling.

In this diagram, the PARENT component (APP) is to pass state around down to as far as PLAYERIDENTITY component. Even though the DASHBOARD component doesn't have a need for this state, the data had to pass through it to get to the other children components: PLAYERSTATE and PLAYER. PLAYERSTATE consumed its share of state; activeplayer and PLAYER component passed on the state to PLAYERSEX and PLAYERNAME even though it didn't have any use for them. PLAYERSEX received the sex of the player and outputted it, and PLAYERNAME sent the last prop down to PLAYERIDENTITY.

Let's see this diagram in code, so you get to understand prop-drilling better.

import { useState } from 'react'
import './App.css'
import Dashboard from './Dashboard'

function App() {

    const [sex, setSex] = useState('male')
    const [name, setName] = useState('Louisa')
    const [activePlayer, setActivePlayer] = useState('Yes')

  return (
      <div className="App">
          <h3> Welcome {name}</h3>
          <Dashboard {...{sex, name, activePlayer}} />
    </div>
  )
}

export default App

import React from 'react'
import PlayerState from './PlayerState'
import Player from './Player'

const Dashboard = ({sex, name, activePlayer}) => {
    return (
        <div>
            <PlayerState {...{ activePlayer }} />
            <Player {...{ sex, name }} />
        </div>
  )
}

export default Dashboard

import React from 'react'

const PlayerState = ({activePlayer}) => {
  return (
      <div className='player-state'>
          <h4>Is the player active? { activePlayer}</h4>
      </div>
  )
}

export default PlayerState

import React from 'react'
import PlayerSex from './PlayerSex'
import Playername from './Playername'

const Player = ({sex, name}) => {
  return (
      <div className='player'>
          <PlayerSex {...{ sex }} />
          <Playername {...{ name }} />
    </div>
  )
}

export default Player

import React from 'react'

const PlayerSex = ({sex}) => {
  return (
      <div>Can you guess player sex? { sex}</div>
  )
}

export default PlayerSex

import React from 'react'
import PlayerIdentity from './PlayerIdentity'

const Playername = ({name}) => {
  return (
      <div>
          <h3>Just one more chance to guess player name right</h3>
          <PlayerIdentity {...{ name }} />
        </div>
  )
}

export default Playername

import React from 'react'

const PlayerIdentity = ({name}) => {
  return (
      <div>{ name}</div>
  )
}

export default PlayerIdentity

This process can be tedious and any slight change of code or correction can break the application. Also, it is prone to errors such as a typo which can ruin the whole process.

With context, a lot of this stress can be done away with. Let's see how useContext works.

The 3 Stages of useContext

There are three (3) stages of useContext.

createContext: This is the stage where the context is created using the createContext() function. It receives only one argument called defaultValue.
Provider: This is a component of the context. It is used to wrap all the components that need access to the information in the context. It receives a single prop called value. The value prop contains the value of your context (sounds like a tautology, but you will see what I mean later). All the components wrapped with the provider, and their children all have access to the value prop of the context.
Consumer: This is another component of the context. It is used to wrap the components that will have access to the components. When the Consumer is wrapped around a component, the value of the state can change, but when it's not, the value of the state remains the defaultValue.

How to use Context

To use context, you have to create it with an in-built function in the useContext hook called createContext. Now, let's create our context, and we will be using the same example we used in the prop-drilling example but now using the useContext concept.

import React, { createContext } from 'react'

export const MyContext = createContext();

Now, this is the first stage of the solution of our code. Next, we will wrap our App component with the context we just created.

import { useContext, useState } from 'react'
import './App.css'
import Dashboard from './Dashboard'
import { MyContext } from './Context'

function App() {

     const [sex, setSex] = useState('male')
     const [name, setName] = useState('Louisa')
     const [activePlayer, setActivePlayer] = useState('Yes')   

  return (
      <div className="App">
          <MyContext.Provider value={{
              sex, setSex, name, setName, activePlayer, setActivePlayer
          }}>
              <h3> Welcome {name}</h3>
                <Dashboard />
          </MyContext.Provider>

    </div>
  )
}

export default App

As you can see, we wrapped the App being the parent component with our context MyContext.Provider. With this, all the components in the application have access to the value prop we set.

Now, let's see the rest of the code. You will realize they aren't as large as they were while prop-drilling. Now, they are lightweight and much more readable while still giving the same result.

import React, { useContext } from 'react'
import { MyContext } from './Context'

const PlayerState = () => {

    const playerStatus = useContext(MyContext)

  return (
      <div className='player-state'>
          <h4>Is the player active? { playerStatus.activePlayer}</h4>
      </div>
  )
}

export default PlayerState

import React, { useContext } from 'react'
import { MyContext } from './Context'

const PlayerSex = () => {

    const playerSex = useContext(MyContext)

  return (
      <div>Can you guess player sex? { playerSex.sex}</div>
  )
}

export default PlayerSex

import React, { useContext } from 'react'
import { MyContext } from './Context'

const PlayerState = ({ activePlayer }) => {

    const playerStatus = useContext(MyContext)

  return (
      <div className='player-state'>
          <h4>Is the player active? { playerStatus.activePlayer}</h4>
      </div>
  )
}

export default PlayerState

To be able to output our JSX, we first name a variable, then call our context using the _useContex_t hook. Then we can render using our variable and call on the state.

Now, these are all the components we need because we didn't have to pass the props through every component manually to get to our desired component.

If this was helpful, do well to follow me. And if you have questions, hola at me in the comment section.

Have a great weekend my friends.

React Series: useRef Hook

Toby — Thu, 06 Apr 2023 20:57:59 +0000

If you want to update the value of an element in your component or access any DOM elements, then the useRef() hook is your go-to. When updating state using useState, the component re-renders every time the state is accessed but using useRef, you can be guaranteed that would not occur.

Initializing useRef

useRef hook is first initialized onto a variable that will perform the mutation. It accepts only one argument and returns a reference. The reference is then accessed through a ref keyword in the element where the mutation will take place. Let's see how to initialize a useRef.

import React, { useRef } from 'react'

const Test = () => {

    const inputRef = useRef()

  return (
      <div>Test</div>
  )
}

export default Test

In the code above, inputRef is the variable where our ref will be hooked onto in the return JSX.

Important Points to Note About useRef

It takes in only one initialvalue.The value can be of any type and it is ignore after the initial render.
It returns a reference object that we refer to with the ref keyword in our JSX.
The value of the reference is mutable.
Updating a reference doesn't re-render the component.
The value of the reference is persistent even when the component re-renders.

The ref.current Property.

The ref object returned in useRef is mutable and contains one property called the .current. The current property is where all the actions in our ref object take place. It gives you all the access to the DOM properties of the element you are making a reference to. Let's see some of the properties of .current.

The _current _property is what helps you mutate the value of your reference.
With the ref.current.contains, you can check if the element you are referencing passes a test. It's just like using (variableName).contains in your string variable while working on arrays.
With the ref.current.focus, you can move the focus of the mouse to a particular element. If you have an application where users need to enter their username before logging in, you can set the focus on the username input box as soon as the application loads.
You can change or re-assign the value of your reference or state with the ref.current.value property.

Now let's see another code example where we will perform a small exercise referencing all the points we mentioned.

const Test = () => {

    const inputRef = useRef()

    const refExample = () => {
        const name = inputRef.current
        inputRef.current = 'My name is Michael'
        console.log(inputRef.current);
    }

  return (
      <div>
          <input type='text' ref={inputRef} />
          <button onClick={refExample}>Click me</button>
    </div>
  )
}
// My name is Michael.

In this example, we are using useRef to update the value of our input element. After creating the inputRef reference, we hooked it on to the input element in our JSX. Then we created a callback function where we updated the value of our reference and logged it to the console. The callback is what we are returning in the button element.
Please run the code and click on the button and you'd see the output.

Using useRef to Access The DOM.

This is one of my favorite ways to use useRef. It can help you access some DOM methods and properties. Once you use the .current property on the ref, it gives you access to some properties that make your application robust.

In this example, I will be using the ref object to output an error in my input element. Let's see how that works.

import React, { useRef, useState } from 'react'

const Test = () => {
    const [name, setName] = useState("")
    const errorRef = useRef()

    console.log(name.length);

    const handleBtn = (e) => {
        if (!name) {
            const nameError = errorRef.current
            errorRef.current.textContent = "Please enter a name"
        } else {
            console.log(name);
        }
   }

  return (
      <>
          <div>
              <h3 ref={errorRef}></h3>
              <input type='text' 
                     value={name} 
                     onChange={((e)=> setName(e.target.value))}/>
          </div>
          <button onClick={handleBtn}>Click me</button>
    </>
  )
}

export default Test

In this example, after setting the ref object to errorRef, it was hooked to the h3 in the input element. We then created a handleBtn function that checks if the user entered a value in the input box. If there is no value in the input box and the button was clicked, the errorRef will output "Please enter a name" to prompt the user to enter a value. if there is a name, it returns.

Using useRef to Focus on an Element

This is another beautiful use for useRef. I guess I mentioned it among the important notes. useRef can be used to focus on important elements on your application. The elements could be username or email input boxes, and they can also be important elements on a form. Let's see how to use if for focus.

import React, { useEffect, useRef} from 'react'

const Test = () => {
    const focusRef = useRef()

    useEffect(() => {
        focusRef.current.focus()
    })
  return (
      <>
          <div>
              <input type='text' ref={focusRef}/>
          </div>
    </>
  )
}

export default Test

In this example, our ref which is focusRef was used in a useEffect, so that once the application loads, the focus of the typing cursor will be on the input element. Please try the code out and you'll see for yourself.

Summary

The value referenced in your ref object will be persistent for the full lifecycle of the component.

Like in one of the examples, the ref will give you access to some DOM nodes. In our case, we were able to access textContent.

useRef dos not re-render when the value of the ref is updated.

I hope this tutorial was helpful. Don't forget to ask me questions if you are confused about anything.

Please like and follow me if you think it's worth it.

Have a great day folks.

React Series: useEffect

Toby — Sun, 02 Apr 2023 16:44:37 +0000

Welcome back to our React Series. I want to believe you had a good grasp of the useState hook in the last class. There is so much more hooks will do for you, and I believe as you continue with this series, you will learn a lot more about them. Today we are moving on to another important hook that you will always come across in your journey in React, and that is the useEffect hook.

What is useEffect hook?

According to the React documentation, the useEffect hook was developed to eliminate some of the challenges posed by the life cycle methods of ES6 class components. The main challenge being handling side-effects. When you create an application that updates user information at every click or a timer app using setTimeout(), this can lead to some unwanted side-effects, and that's one use-case for useEffect.

Using useEffect is understanding the lifecycle of a component. A component's lifecycle is in three stages: componentDidMount, componentDidUpdate and componentWillUnmount. Albeit, using these lifecycle methods is a class component feature. They cannot be used in a functional component.

useEffect is a combination of React's lifecycle methods. It helps you eliminate the repetition of code, and groups related code in one code block in a functional component. With useEffect, you can do so much with writing so little.

Important concepts about useEffect

It handles side-effects.
It takes in 2 parameters: a callback and dependencies.
The dependency array can take in more than one variable.
Effects automatically run after every re-render, except you handle it in your dependencies.
If handled in the dependency, effects run only when there is a change in the state of the dependency.
If not handled well, side-effects can have damaging effects on your program or code.
It helps you recognize the relevant part of the code after first render.

What are side-effects?

These are actions performed outside of our React component in the component. These actions can indirectly change the returned output of our React component. Usually, the output of a component should be determined by the props or state. Side-effects are used to communicate with elements outside of the component. These elements can be APIs for data fetching, manually changing the DOM, timer functions like setTimeout, window objects etc.

How to use useEffect

At this point, I believe you already have some sort of insight as to the use of useEffect. Now, we will be moving on how to write your first useEffect.

As I mentioned in the earlier point stated above, useEffect takes in two (2) arguments: a callback function and a dependency array. Let's see what that looks like in the code.

import { useEffect } from 'react'

useEffect((callback) => {
    //function that runs every time there is a re-render.
}, [dependency array])

Typically, this is how to write your useEffect. Takes in two (2) arguments: the callback function and the dependency array. If there is any type of change in the dependency variables, the callback function runs automatically. The dependency array could be a variable, prop or some kind of state. Also, the dependency array could contain more than one item. It can take in as many variables as possible.

useEffect With An Empty Depencendy Variable:

import { useEffect } from 'react'

useEffect((callback) => {
    //function that runs every time there is a re-render.
}, [])

When the dependency variable is empty, the callback function runs only once, and that is when the component renders for the first time.

useEffect Without a Dependency Array:

When the dependency array is not included in the useEffect, the function for the side-effect runs every time there is a re-render. Doing this might lead to multiple re-renderings and that may be bad for your program.

import { useEffect } from 'react'

useEffect((callback) => {
    //function that runs every time there is a re-render.
})

Cleanup Function in useEffect?

We sometimes need to stop the side-effect from running in a program. If for example, we have a timer function using setInterval, the function will keep running until we stop the function using clearInterval. Another example can be subscriptions that need to be stopped when they are no longer required. Cleanup function allows us to stop side-effects that no longer need to be run.

If for example we set state using setInterval and the function was not cleaned up. When the component is abandoned or no longer in use, the setInterval function will keep running and it will try to update the state even though it no longer exists. That is what we call Memory Leak. An example is in the code below.

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

const Test = () => {

  const [time, setTime] = useState(0);

  useEffect(() => {
    setInterval(() => setTime(time + 1), 5000); 
      console.log(time);
  }, []);
}

export default Test

The above code is to update by 1 every 5 seconds. Even when we abandon the component and don't use it again, under the hood, it will keep incrementing, and that's because we didn't do a cleanup which may eventually cause a problem in our application.

To cleanup our timer function, we will create a clearInterval function under the callback. This clearInterval function will cleanup the side-effect every time our timer function runs. Let's see the code below.

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

const Test = () => {

  const [time, setTime] = useState(0);

  useEffect(() => {
    let interval = setInterval(() => setTime(time + 1), 5000); 

    return () => {
      // setInterval is cleared when component unmounts
      clearInterval(interval);
    }
  }, []);
}

export default Test

With this cleanup function, we are guaranteed that this component can do no damage to our application, because once the component unmounts, the side-effect stops updating.

NOTE:
You do not need the cleanup function for every side-effect. You only use it for certain components that update every time like a timer function, subscription etc.

I really hope this was helpful. If you have any questions, please feel free to ask me anytime. Also, don’t forget to follow me and like this tutorial.

Thanks and have a great weekend.

React Hooks: useState

Toby — Wed, 29 Mar 2023 14:47:09 +0000

React Hooks are the special functions that let us tap into React features in a functional component. As we all know, React is a powerful library that lets us build fast and reusable user interfaces. These interfaces have special features that we couldn't have access to in a functional component, hence the advent of Hooks.

Hooks are JavaScript functions used in React as components. You cannot use Hooks in Vanilla JavaScript, and neither can you use them in class-based components. Hooks can only be used in a React Functional Component. State in Hooks can be of any data type: object, array, null, string, number etc, unlike in classes where the data type has to be an object. Now, let's get to the Hook of the day; useState.

What is useState?

useState is the hook that helps you add and manage the state in a React application. It consists of a destructured pair of values where the first value is the current state of the variable, while the second is the updater function. In classes, you can use this.state to update the state of a function, but in React function component, you use useState to do the same job. useState makes state easier to understand access.

useState is the most used Hook out there, and also the simplest of all the Hooks. Unlike JavaScript where you have to manually grab the HTML element you want to update, useState does that for you. State is kept inside a hook and accessed from the component where you call the hook; what this means is you can only call the hook inside the component where it was created, and not outside of it.

Rules of using useState

Always follow the pascalCase naming convention when naming your variables.
Always make sure your second variable starts with set.
State can be of any data type.
Only use hooks in a function component.
Never directly mutate state.

Why useState?

You don't have to manually update state.
When the state updates, the page does not refresh, unlike vanilla JavaScript.
Updating state is very fast.

Now let's get to the practical understanding of the topic at hand.

Importing useState

To use useState, you have to import it into the component where you will be declaring it, or you can use React.useState to declare your variable. In this class, we will be importing it as it's most likely the method you will see being used.

import React, {useState} from 'react'

useState is a named export destructured from the React library, hence why it's wrapped in curly braces. When we move on to other hooks, they will be wrapped similarly in curly braces.

Declaring a useState variable

useState has two variables: the initialValue and the updating function. These variables are destructured in an array, with the first variable being assigned the value in the useState function, while the second variable is the function that updates the state. I will make this explanation clearer in the example below.

To declare a useState hook, you run the following code:

const [state, setState] = useState(initialValue)

You are not obliged to name your variables state and setState. You can name them anything. It could be oranges and setOranges. Just make sure to follow the naming convention by letting your second variable start with set.

You are allowed to have as many states as possible in a component. For instance, if you have a form component where you have to take the name, address and age of the user, you can simply do it like this.

import React, {useState} from 'react'

const userForm = () => {

    const [name, setName] = useState("John")
    const [address, setAddress] = useState("14, mayne street, Indiana")
    const [age, setAge] = useState(28)

  return (
      <div>
          <input type='text' value={console.log(name)}/>
          <input type='text' value={console.log(address)}/>
          <input type='number' value={console.log(age)}/>
    </div>
  )
}

export default userForm

From the code above, you will understand better what I mean when I say the first variable is assigned the initialValue set in the useState function.

Let's check the console to see its output.

With the above result, I want to be sure you have an inkling of an idea of the value the first variable is assigned to. If the useState("John") function for the name was an empty string like this useState(" "), that will be the initialValue of name. The same applies to the rest of the state values.

Updating a useState variable

To update the value of the above example, we will be using the second variable, which is the function updater. There will be some addition to the code, as we will be using events to update the function. Well, as you know, events are the actions that place to make a static website an interactive one.

Now let's get to it. We will be using the same code as above, but with some changes.import React, {useState} from 'react'

import React, {useState} from 'react'

const userForm = () => {

    const [name, setName] = useState("John")
    const [address, setAddress] = useState("14, mayne street, Indiana")
    const [age, setAge] = useState(28)

  return (
      <div>
          <input type='text'
              value={console.log(name)}
              onChange={ ((event)=> setName(event.target.value))} />
          <input type='text'
              value={console.log(address)}
              onChange={ ((event)=> setAddress(event.target.value))}/>
          <input type='number'
              value={console.log(age)}
              onChange={ ((event)=> setAge(event.target.value))}/>
    </div>
  )
}

export default userForm

From the code, we can see the onChange event being called. And inside the onChange event, we are using the second variable for each state to update the state from the initialValue.

To update the state with the onChange event, we have to use a prop which could be named event as in our case, or e or ev as some people do. It's just to note that an event is taking place in the function. After all of this is done, you can type in your input box and watch the state update. Take a look at my input box and the console below.

And in the console, it has been updated to this value in my input box. You can try it too, with a different input.

From the example above, we used string and number as our data types. You can use other data types as well and not just these. I'll declare some new states with other data types so you don't get confused about what they may look like.

import React, {useState} from 'react'

const userForm = () => {

    const [name, setName] = useState("John")
    const [address, setAddress] = useState(null)
    const [age, setAge] = useState(28)
    const [scores, setScores] = useState({ 'English': 75, 'Science': 64 })
    const [favoriteFood, setFavoriteFood] = useState(['rice', 'beans', 'cereal'])

  return (
      <div>
          <input type='text' value={console.log(name)}/>
          <input type='text' value={console.log(address)}/>
          <input type='number' value={console.log(age)}/>
          <input type='number' value={console.log(scores)}/>
          <input type='number' value={console.log(favoriteFood)}/>
    </div>
  )
}

export default userForm

Let's look in the console to see our output as we have used different other data types.

There isn't much difference in updating these other data types. The processes are the same. Just create an input element in your JSX for them and update them accordingly.

In the next article, we will be learning useEffect.

Hope this was helpful. If you have any questions, please feel free to ask me anytime. Also, don’t forget to follow me and like this tutorial.

Thanks and have a great day.

React Series: Introduction

Toby — Sat, 25 Mar 2023 16:57:12 +0000

Topics

Introduction
Why Use React
What are Components
What is JSX
Props
State.

This is going to be a React series discussing React and Hooks. We will discuss an overview of React in today's topic and then proceed to discuss Hooks from the next article. It's going to be a hands-on series where you will learn so much as a beginner, and then proceed on to intermediate and advanced levels in React. Let's get started.

Introduction:

React is an open-source JavaScript library for building dynamic and interactive user interfaces both on the web and on mobile. It is widely popular and has about the largest community of developers using it. As opposed to the mix-up of React being a framework, it is a library.

Everything in React is built inside a component. Components house every UI and functionality in a React app. The components serve as several building blocks that are put together to build a house. We will discuss components in the later part of this article.

Why Use React:

React is very easy to learn and understand. As a lot of developers say, learning React makes JavaScript a lot easier.

React is a component-based library that helps you divide your code into small, reusable, organized and modular components. Because a React program is a tree with the main component being the App, the small, reusable components are its branches.

React maintains a Virtual DOM, which makes it very fast. A Virtual DOM is a representation of the real DOM. So with React, when changes are made in an app, the Virtual DOM only updates the node where the changes were made in the real DOM. So unlike JavaScript where the whole page reloads when changes are made, React only updates the component where the changes were made.

It is perfect for building interactive and reusable user interfaces.

It makes debugging easy. Since React apps flow like rainfall (from top to bottom), it makes debugging from one line of code to the next easier and less confusing.

It is efficient in building small to large applications.

It is suitable for building mobile and web applications.

What are Components?

A car consists of several parts like the brake, steering, engine, carburetor, battery etc. Except these parts are wired and screwed together, the car is not driveable; it is just a piece of parts. Once these parts are screwed and wired together, the car comes to life. The same thing applies to a React app. It consists of several building blocks called components. The component houses every function, method and property that belongs to a particular user interface.

These individual components are then wired together under the parent UI usually called the App. The App in return becomes the face of the entire React app. It represents the totality of the project, housing several individual components.

In React, there are two (2) types of components:

Functional components
Class functions.

Functional Components:

This is the most popular type of component you will see in React apps these days. It's not so different from JavaScript functions. Data may or may not be passed as parameters to these functions, but data can be passed from one component to the other through props. Let's see an example of a Functional component.

import React from 'react'

const Test = () => {
  return (
      <div>
          <h1>This is a Functional component</h1>
    </div>
  )
}

export default Test

Class Components:

A class component is in truth more robust than a functional component, but you will hardly see developers use it these days. Not because it is out of vogue, but because it is more complicated to understand. It is not beginner friendly. A class component comes with a render method that renders onto the screen. Below is an example of the class component.

import React from 'react'

export default class Test extends React.Component {
  render() {
    return (
      <div>This is a class component</div>
    )
  }
}

NOTE: Throughout this series, we will be using the Functional component for our examples.

What is JSX?

Its full meaning is JavaScript XML, and it is a JavaScript syntax that allows you to write HTML directly in your React. It helps to describe how the user interface will appear in the React library.

const Test = () => {
  return (
/*
      <div>
          <h1>This is a Functional component</h1>
    </div>
*/ This here is an example of JSX. This is HTML in JavaScript.
  )
}

Props:

Props are used to pass data from one component to the other. Props are passed down, not the other way. What that means is, props are passed from parent to sibling components and not the other way.

To have a better understanding of props, you can check out Props: What you need to know.

State:

This is the present value of an object whose value may change over time as a result of an event in the application. The event can be a result of a click of a button, an onChange event etc. The most prominent way to handle state in React is the useState Hook. We will be moving on to Hooks, and useState will be the first Hook we discuss in the next article.

Hope this was helpful. If you have any questions, please feel free to ask me anytime. Also, don’t forget to follow me and like this tutorial.

Thanks and have a great weekend.

HTTP request: Fetch vs Axios

Toby — Wed, 22 Mar 2023 13:08:33 +0000

The bedrock of any programming language is the ability to make requests from an API. The absence of this means we are operating a static non-dynamic application. Data fetching is key in software development, as the majority of the data we would be needing to operate with comes from an API. Using JavaScript means we are building a dynamic web application that fetches data from an API and also sends the same, hence, we will be using some methods to fetch these data from its source, receive these data and also send some information to an API where they will be processed and used. This calls for the use of data-fetching methods.

In JavaScript, there are several methods and ways through which you can make your HTTP requests, but we will be talking about the two most used HTTP clients;

Fetch
Axios

These two HTTP clients are used to build CRUD (Create, Read, Update, Delete) operations. A CRUD operation is used to perform certain requests and calls from and to an API. There are mainly four HTTP request methods that can be performed using either Fetch or Axios:

GET: Used to request data from a resource.
POST: Used to send data to a resource.
PUT: Used to update data in a resource.
DELETE: Used to delete data in a resource.

Both of these methods have some differences and similarities, and I am sure as we take a deeper dive in each one, we will discover them. Hang on with me as we explore them together.

FETCH:

Fetch is a method that stemmed out of the Fetch API interface. The Fetch API is a native JavaScript API and it is available in all modern browsers. Since it is an in-built JavaScript API, you do not to install it.

Fetch returns a Promise. A promise is used to handle asynchronous operations in JavaScript. It holds the result of the operation in 3 stages; pending, fulfilled or rejected.

Now back to Fetch, let’s see in practical terms how Fetch is used.

Fetch can be used for data fetching in 2 ways;

USING FETCH WITHOUT CONFIGURATION SETTINGS:

When using fetch without configuration settings, the default method for Fetch is a GET. That means you are trying to pull data from a resource.

fetch('https://jsonplaceholder.typicode.com/users')
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    });

The result of our fetch is thus:

Using this method, Fetch knows you are performing a GET operation, so you don’t necessarily need to do this fetch.get('https://jsonplaceholder.typicode.com/users').

USING FETCH WITH CONFIGURATION SETTINGS:

When setting configurations with Fetch, a lot of parameters can be set manually, such as method, headers, data etc. This method is more suitable if you need to stringify the data, if you are expecting a different content-type, if you need to set a timeout for the page etc.

const newUser = {
    name: 'Michael Toby',
    address: 'Lagos, Nigeria',
    job: 'Web Developer'
}

fetch('https://jsonplaceholder.typicode.com/users', {
    method: 'POST',
    headers: {
        "content-type": "application/json"
    },
    body: JSON.stringify(newUser)
})
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    });

This code above is a POST method, meaning we are sending data to an API. The data we are sending is the newUser object, and if you see the id in the response below, you will see the id has been updated to 11.

.then() is where the promise is handled. It either resolves or rejects the response from the API. When it resolves, we then convert our response to json(), after which we use another .then() to receive the data we are expecting.

To handle error in fetch, you use the .catch() method.

fetch('https://jsonplaceholder.typicode.com/users', )
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.log(error.message)
    })

And if you want to create a custom error message, you can do this:

fetch('https://jsonplaceholder.typicode.com/users', )
    .then((response) => {
        if (!response.ok) {
            throw new Error(
                `This is a ${response.status} error`
            )
        }
        return response.json()
    })
    .catch((error) => {
        console.log(error.message);
    })

POINTS TO NOTE:
The object you are expecting from the API is in the response object.
Fetch does not convert its data to json by default.
When sending or updating data to an API, your content will always be in the body property. Also, always remember to JSON.stringify() your content.
Always set content-type to application/json or your preferred type.

AXIOS:

Axios is a third party library that allows you to make HTTP requests. And just like Fetch, it returns a promise.

To install axios, you can run this code as it pertains to you.

Install using npm
npm install axios

Install using yarn
yarn add axios

Like Fetch, Axios can be used for data fetching in 2 ways;

USING AXIOS WITHOUT CONFIGURATION SETTINGS:

Using axios without configurations is a default GET method. And that is used when we are trying to fetch data from the resouce. Let’s get at it.

axios('https://jsonplaceholder.typicode.com/users')
    .then((response) => {
    console.log(response.data);
})

The result will be the same as Fetch, only difference is that the result will be found in an array inside the data file.

USING AXIOS WITH CONFIGURATION SETTINGS:

Using axios with configuration parameter isn’t much different from Fetch. The two obvious difference being that content is attached to data, as against body in Fetch, and you don’t need to stringify the content as axios automatically converts it’s data into json(). Let’s see for ourselves.

const newUser = {
    name: 'Michael Toby',
    address: 'Lagos, Nigeria',
    job: 'Web Developer'
}

axios('https://jsonplaceholder.typicode.com/users', {
    method: 'POST',
    headers: {
        "content-type": "application/json"
    },
    data: newUser
})
    .then((response) => {
        console.log(response.data);
    })

This is not an array because it is a single object. Moreso, the result is the same as the Fetch Method.

We can also write the code like this and get the same result:

const newUser = {
    name: 'Michael Toby',
    address: 'Lagos, Nigeria',
    job: 'Web Developer'
}

axios({
    url: 'https://jsonplaceholder.typicode.com/users' 
    method: 'POST',
    headers: {
        "content-type": "application/json"
    },
    data: newUser
})
    .then((response) => {
        console.log(response.data);
    })

Like Fetch, .then() is where the promise in axios is handled. It either resolves or rejects the response from the API.

To handle error in axios, you use the .catch() method.

axios('https://jsonplaceholder.typicode.com/users')
    .then((response) => console.log(response.data))
        .catch((error)=>{
        if (error.response) {
        // When a request is made but the resource returns an error
        console.log(error.response.data);
        console.log(error.response.status);
    } else if (error.request) {
        // When the request is made but no response from the resource.
        console.log(error.request);
    } else {
        console.log('Error', error.message);
    }
})

POINTS TO NOTE:
The object you are expecting from the API is in the data object.
Data is automatically set to the json format by default.
When sending or updating data to an API, your content will always be in the data property. Also, no need to stringify your content.

Hope this was helpful. If you have any questions, please feel free to ask me anytime. Also, don’t forget to follow me and like this tutorial.

Thanks and have a great day.

var, let and const.

Toby — Sat, 18 Mar 2023 16:09:28 +0000

There were quite some feature changes in JavaScript ES6, and notable among them is the variable declaration keyword. These keywords have been game-changers in understanding the scope and concepts of declared variables. The var keyword is the oldest among the 3 and has been used for several years, but until recently when updates were made to the ES6, the scope problem was solved by the introduction of new keywords: let and const. Today, we will be discussing all three (3) keywords, their scope and concepts, and when to use them, but first, we will need to talk about scope so it helps us understand these keywords when mentioned.

When we talk about SCOPE, we talk about the accessibility of a variable. A variable can either be scoped globally or locally. A global variable is one that is declared outside a function, so it can be accessed anywhere in the code, while local variables are declared inside a function and can only be accessed within the function where it was created. Now that scope has been understood, let’s move on to the main topic of the day.

*** VAR ***
This has been the oldest declarative keyword in JavaScript. A lot of early JavaScript adopters are so used to it I bet it will be difficult to take it away from their heads, so don’t expect to only encounter var in legacy codebases or if you’re working with super senior developers. The var keyword has its flaws hence the creation of the other two (2) keywords. Let’s play with some codes to see some of these flaws.

SCOPING OF VAR:

Scoping of var relates mainly to how the variable was declared and how it is being accessed. Var is function scoped, so variables are not limited to being accessed in the block where they were declared. In the below code, we will see what it means to declare a var variable globally and locally and the scope of each.

var games = 'football'

function football() {
    var striker = 'michael'
}
console.log(games);// football
console.log(striker);// Error: striker is not defined

The output of this code in the console will be:

The output from the games variable was football, while striker gave an error. The reason is that games is a global variable and so it can be accessed anywhere in the function, while striker is a local variable and can only be accessed anywhere inside the function.

In the below code, we will try to access the games variable inside the function. Let’s see the output.

var games = 'football'

function football() {
    var striker = 'michael'
    console.log(striker);
    console.log(games);
}
football()

Tadaaaa!!! Like magic, both variables output without errors. And that is because global variables will output anywhere they are called.

RE-DECLARATION OF VARIABLES:
A var variable can be re-declared or updated. Let’s see that in code visuals.

function football() {
    var striker = 'michael'
    var striker = 'messi'
    striker = 'ronaldo'
    var striker = 'neymar'
    console.log(striker);
}
football()

// The output of this code is neymmar
From the above code, we declared the variable, re-declared it, updated it and then re-declared it again to arrive at neymar as our final output because that was our last declaration.

IMPORTANT!!! This type of code above is the reason why var is prone to causing errors. If you have forgotten you had an earlier variable named striker and it has been declared in some parts of the code with important values, and you mistakenly re-declare it, it could ruin the whole project you’re working on.

HOISTING WITH VAR:
JavaScript’s default behavior is moving all functions, classes and variables to the top of their scope before the execution of the code, so with var, variables are first initialized as undefined before the declaration.

function football() {
console.log(striker);// undefined
    var striker = 'michael'
    console.log(striker);// michael
}
football()

*** LET ***
This is an improved keyword than var. Let us take a look at some of the improvements of the let keyword against the var.

BLOCK-SCOPED:

It is block-scoped and thereby variables declared inside the block can not be accessed outside it. Let’s take a peep at what that means.

function football() {
    let striker = 'michael'
if (striker.length = 6) {
        let forward = 'ronaldinho'
        console.log(forward);// line 7 ronaldinho
        }
    console.log(forward);// line 9 error
}
football()

The output of this code is:

The output of the variable forward is ronaldinho, because the variable was declared within the block of code, unlike in Line 9 which was called outside the block of code hence returning an error because the variable forward was not declared in the function named football.

RE-DECLARATION OF VARIABLES:

Variables declared with the keyword let cannot be re-declared as we saw with the var keyword. Let’s try an example.

_function football() {
    let striker = 'michael'
    let striker = 'messi'
    console.log(striker);
}
football()_

This code will throw an error because striker has been declared and so it can’t be re-declared. The output is this:

VARIABLES CAN BE UPDATED:

Variables can be updated after they have been declared.

function football() {
let forward = 'rooney'
    forward = 'mbappe'
    forward = 'kane'
    forward = 'salah'
    console.log(forward);
}
football()
// salah

The output of our update variable is thus:

GLOBAL VARIABLES CAN BE ACCESSED IN THE BLOCK:

var games = 'football'
function football() {
    var striker = 'michael'
    console.log(striker);
    console.log(games);
}
football()

The output will be the same as that of var.

HOISTING WITH LET:

Like var, declarations, classes and functions are hoisted to the top of the code, but with let, variables do not initialize as undefined. Let does not allow a variable to be called before it is declared. Let’s see how it plays out.

function football() {
console.log(striker);
    let striker = 'michael'
    console.log(striker);
}
football()

The output of this will be an error.

*** CONST ***

const variables are constants and their values can not be changed. const shares the same similarities with let with maybe very few differences. In addition to all the characteristics of let, we can add these few other updates to const.

ITS VALUES ARE CONSTANTS AND CANNOT BE UPDATED:

Any variable declared with the keyword const, can not be changed or updated. Unlike var and let where their values can be re-declared or updated, const doesn’t allow for that. Let’s see if we can try that.

function football() {
const forward = 'rooney'
    forward = 'mbappe'
    console.log(forward);
}
football()

Well, this code threw an error. Let me share it so you can see it too.

THE PROPERTIES OF AN OBJECT CAN BE MANIPULATED:

const variables are constants and therefore they can not be changed. With objects, the properties can be manipulated but not directly. Let’s see how that can be done.

const shopping = {
    grocery: 'sausage',
    fruit: 'apple',
    vegetable: 'carrot'
}

shopping = {
    grocery: 'beef'
}
console.log(shopping.grocery);

In the above code, we are trying to change the value of grocery. Can that be done? Well, let’s give it a try. Follow me.

Oops…It threw us an error. Well, that is expected because that isn’t the right way to change the value of the grocery property. Now, let’s do it the right way. To change the value of grocery, we will do it this way.

const shopping = {
    grocery: 'sausage',
    fruit: 'apple',
    vegetable: 'carrot'
}

shopping.grocery = 'beef'
console.log(shopping.grocery);// beef

HOISTING WITH CONST:

Just like let, declarations are moved to the top of the code, but they are not initialized as undefined.

Thanks for taking the time to go this far in the tutorial. If you have any questions, please feel free to ask me anytime. Also, don’t forget to follow me and like this tutorial.

Thanks and have a great weekend.

Commonly Used String Methods

Toby — Wed, 15 Mar 2023 17:00:45 +0000

A String is a data type that is synonymous with all programming languages, and that is because it is the most frequently used data type. In JavaScript, String is used to holding text, and in most cases, these texts are variables. Strings are used to convey messages, store values in the form of variables and manipulate and modify them. A string is any variable whose value is stored in-between quotes (“ “). Strings can also represent non-text characters that are treated as texts e.g phone numbers in a form. A phone number can be represented by a string because they are not used in arithmetic calculations and most cases, they are usually preceded by a “+” sign, unlike what you will consider an integer which can perform mathematical operations.

Let’s highlight some of the important characteristics of a string data type:

Their values are stored in quotes (“ “).
They can be used to store phone numbers.
You cannot mutate a string.
Length(): The length property is used to calculate the length of the string. Let’s see how to apply the length property.

const myString = 'My name is Michael'
const lengthofString = myString.length;
console.log('The length of the string is', lengthofString);

In the console, the output will be:

The length of the string is 18.

There are 15 characters and 3 white spaces. White spaces will be counted alongside characters.

Concat(): This method is used to add two or more string variables together. The strings can be combined using the concatenation symbol (+).

const myString = 'My name is Michael '
const secondString = 'and I like to code';
const stringConcat = myString + '' + secondString
console.log(stringConcat);

This method can also be done using the string concat method.

const myString = 'My name is Michael '
const secondString = 'and I like to code';
const stringConcat = myString.concat(secondString)
console.log(stringConcat);

For both methods that were used, the output will be the same. In your console, the result will be:
My name is Michael and I like to code

CharAt(): This method returns the value or character at the specified index of the string. The charAt method is zero index based, so it starts counting from position 0.

const myString = 'My name is Michael'   
const charOfString = myString.charAt(11);   
console.log(charOfString); // M

The character at the index of 11 is M.

IndexOf(): This method returns the index position of the given string. If the given string does not exist, it will return -1. Let’s try to play around with both cases and see its return.

const myString = 'My name is Michael'
const indexOfString = myString.indexOf('eis');
console.log(indexOfString);// The output is -1

The output of this case is -1 because our given string (‘eis’) does not exist in the string. Now let’s try the availability of the given string.

const myString = 'My name is Michael'
const indexOfString = myString.indexOf('is');
console.log(indexOfString);// The return in the console is 8

The return in the console is 8 because our given string (‘is’) exists and the first index of the string is 8.

LastIndexOf(): This method works just like the indexOf only that it returns the last index of the given string. Let’s see how it works.

const myString = 'My name is Michael and the color of my car is green'
const indexOfString = myString.lastIndexOf('is');
console.log(indexOfString);// 43

In the string above, our given string (‘is’) appeared twice in the sentence, so the lastIndexOf method picked the index of its last occurrence which is 43.

ToLowerCase(): This method converts the string to lowercase. It removes every capitalization in the string.

const myString = 'I LOVE JAVASCRIPT AND REACT'
const stringMethod = myString.toLowerCase();
console.log(stringMethod);// i love javascript and react

ToUpperCase(): It works as the opposite of the toLowerCase method. This method capitalizes all the characters in the string.

const myString = 'I love javascript and react'
const stringMethod = myString.toUpperCase();
console.log(stringMethod);// I LOVE JAVASCRIPT AND REACT

Trim(): This method is used to remove all the white spaces in the string.

const myString = ' I love javascript and react '
console.log(myString.length);

const stringMethod = myString.trim();
console.log(stringMethod);
console.log(stringMethod.length);

The result of the above code is:

If you take note, myString has a white space before the first text and another white space after the last text, so when we console.log the length, it returned 29. Then we used the trim() method, and the white spaces were removed thereby returning 27 after we checked the length.

Includes(): This is one very useful string method. It comes in handy when searching through a large list, and maybe sifting data from an API. It is used to check if a string passes an argument. It returns a boolean and it is case-sensitive.

const myString = ' I love javascript and react '
const stringMethod = myString.includes("java");
console.log(stringMethod);// true

From the code above, we checked if our string includes java, and Yes it does, from the javascript word, that was why it returned true.

StartsWith(): This is used when trying to check if a string starts with a given string or character. It returns a boolean too like the includes and it is case-sensitive.

const myString = 'I love javascript and react'  
const stringMethod = myString.startsWith("I");  
console.log(stringMethod);// true

const myString = 'I love javascript and react'  
const stringMethod = myString.startsWith("i");  
console.log(stringMethod);// false

EndsWith(): Just like the startsWith, it checks if a string ends with a given string or character. It is case-sensitive and it returns a boolean.

const myString = 'I love javascript and react'
const stringMethod = myString.endsWith("act");
console.log(stringMethod);// true

const myString = 'I love javascript and react'
const stringMethod = myString.endsWith("treat");
console.log(stringMethod);// false

Replace(): This method searches through the string, finds the first occurrence of a string and replaces it with the second argument. It receives two (2) parameters, the first being the one to be replaced, and the second the one to be replaced with. Let’s see it in action.

const myString = 'I love javascript and react'
const stringMethod = myString.replace("react", "python");
console.log(stringMethod);// I love javascript and python

Slice(): It returns a part of a string as set in the parameter. The parameter sets the start and the end of the string.

const myString = 'I love javascript and react'
const stringMethod = myString.slice(7, 17);
console.log(stringMethod);// javascript

There are a couple of other string methods that are important to know, even though you may not get to use them everyday.

I hope this tutorial has been helpful. If Yes, you can like and follow me.

Thanks and have a great day.

Important Vscode Extensions In 2023

Toby — Sat, 11 Mar 2023 12:59:17 +0000

It's 2023, and Visual Studio Code is still the best Integrated Development Environment (IDE) out there. Vscode is the most popular IDE at the moment, not just because it's a Microsoft-licensed distribution of code, but also because it has an open-source community that contributes to the performance of the software. Amongst its so many features, the one that stands out for me is its integration with Git. Being able to push code to your GitHub from Vscode is the first of its kind and one that endears a lot of developers to the software.

WHY USE VS CODE:
Vscode offers a lot of features that every developer needs and these features as we know were made to increase productivity. So in a nutshell, Vscode enhances productivity. These features help make coding easier, less time-consuming and improve productivity. Features range from debugging, code completion, code refactoring, and code snippets, to embedding Git. This is a lot of satisfaction. So my friends, let's get to the topic of this article, the best vscode extensions in 2023.

I will be talking about the best vscode extensions that every developer needs in 2023, to help make coding interesting and at the same time help us achieve more. I'll break these extensions down into categories and list some of the extensions for each category. Let's get into it friends.

LOCAL ENVIRONMENT:
If you need a local environment to help you see the changes that have been made in your code, these extensions are the best you should have a look at.

LIVE SERVER: Live server creates a local server environment for you which can be watched in your localhost:3000. This helps you see the real-time changes made in your code. This is very helpful when you want to watch what you are developing and want to be sure your code manifests the output. You should try it out today.

CODE FORMATTING:
When you consistently write code in a style, it helps make your code readable, finely formatted and easier to work with and understood. But we all know writing code is a heck of a work, talk more keeping consistency when writing them. That is when code formatting extensions come into play. They help us format our unformatted codes and save us time having to go back to format them. These 2 extensions help in this category.

PRETTIER: This is an open-source opinionated code formatter that helps you format your code and make it look neat and pretty. It enforces its format style over your original code (once it is saved) and makes it clear and readable. You can also set your custom format style in the settings.

BEAUTIFY: If your code is written in JavaScript, CSS or HTML, then this extension is also a good fit for code formatting. You can set how you want your code to be formatted in the settings, and that will be used as the default settings for your code formatting.

CODE SNIPPETS:

Code Snippets are small reusable code blocks that are added to code files as templates. They help developers maximize their time by using the templates instead of having to write the code for the files from scratch. Let's look at a couple of them below.

JAVASCRIPT(ES6) CODE SNIPPETS: As we all know, JavaScript is the most popular programming language in the world, and it is only right to have a code snippet for JavaScript-related codes. This code snippet is one of the most used at the moment and it has been very helpful to a lot of developers. It saves the time to write boilerplate codes and just advances you to writing the logic to your code.

SNIPPET: This is one of the best code snippet extensions. It is laced with AI to automatically detect the programming language in the current editor window. It is a collection of extensions for the most commonly used programming languages and it helps improve productivity. It saves you the time of having to install several language extensions.

INTELLIGENT CODE COMPLETION:

Code Autocomplete extensions help suggest your next line of code through the use of Artificial Intelligence. They suggest completion codes by looking at the context of the earlier codes and suggest codes that will fit in in completion, even down to classes and variable names. Let's take a look at the most popular ones.

GITHUB CO-PILOT: This extension I would say set the precedence in code auto-completion. It is a cloud-based AI-powered extension that supports autocompletion in all programming languages and helps a lot in work productivity and time management. It is a brilliant innovation in this space.
TABNINE: This is another AI-powered autocompletion extension that works with all programming languages. It helps you to write your code and suggests auto-complete codes along with your coding context. It is a powerful tool that helps reduce the time spent writing code and improving productivity.

INTELLICODE: Most developers are familiar with intelliSense; the intelligent visual studio extension. IntelliCode is the Ai-integrated and enhanced intelliSense. It predicts the most likely code completion suggestion, and it can be used with all programming languages.

These extensions will save you a whole lot of time while coding and also improve your productivity while at it.

I hope this tutorial has been helpful. If Yes, you can like and follow me.

Thanks and have a great weekend.