What is the UseEffect Hook and How to use it properly

AndrewCabana — Sat, 17 Jun 2023 01:59:24 +0000

In React, the useEffect hook has become a powerful tool that allows developers to perform side effects in functional components. useEffect is usefull in many scenarios whether you need to make a call to an API, subscribe to events, or clean up resources, useEffect provides a clean and concise way to handle these events. this post is aimed to explain what the useEffect hook is and how to use it effectively in your React apps.

Understanding useEffect:
The useEffect hook is a built-in function in React that allows you to perform side effects after rendering a component. Side effects include things like data fetching, subscriptions, or manually changing the DOM. useEffect is called after every render by default, but you can control when useEffect is called using dependencies.

Using useEffect:
To start using the useEffect hook, you first need to import it from the 'react' library:

The basic syntax of the useEffect hook looks like this:

The first argument to useEffect is the function that will be executed as a side effect. The optional second argument, 'dependencies,' is an array of values. If any of the values in the dependency array change, the effect will re-run. If you want the effect to run only once, pass an empty dependency array.

Example 1: Fetching data with useEffect

In this example, we use the useEffect hook to fetch data from an API. The effect is triggered only once when the component mounts (empty dependency array). It sets the fetched data to the 'data' state using the 'setData' function.

Example 2: Subscribing to events with useEffect

In this example, the useEffect hook is used to subscribe to the scroll event. The effect runs once when the component mounts, adds an event listener for scroll events, and removes it when the component unmounts (cleanup code).

Conclusion:
The useEffect hook is a fundamental tool in React for handling side effects. By understanding this hook and using the provided examples, you can leverage this hooks fuctionality to fetch data, subscribe to events, and perform other necessary operations in your functional components. Remember to use the dependency array wisely to control when the useEffect hook should run. With useEffect, you can write cleaner, more concise code in your React applications.

Exploring JavaScript Fetch API

AndrewCabana — Fri, 05 May 2023 19:27:18 +0000

What is Fetch? JavaScripts fetch API is powerful yet simple promised based interace that allows web browers to make HTTP request to servers. Fetch request are similar to XMLHTTPrequest, however with the use of promises Fetch request offers a simpler solution that avoids using callbacks.

Sending a request
Below is a basic example of the fetch() method

fetch('example url')
.then(response => {
// server response
console.log(response);
})
.then(data => {
// data from url
console.log(data);
})
.catch(error => {
//error handling
});

This code uses the fetch method to make a network request to an example URL. It then uses the .then method to handle the response returned from the server and log it to the console.

Afterwards, it uses another .then method to handle the data returned from the previous step and log it to the console.

Lastly, it uses the catch method to handle any errors that may occur during the fetch request and log them to the console.

Init Options
the fetch() method has two paramaters that can be passed.The path to the resource is the first parameter and is required for the method to work properly. A second optinonal init paramater is used for futher options of the fetch() method.

const initOptions = {
method: "POST",
headers: { 'content-Type' : 'application/json },
body: JSON.stringify({ title: 'Example Fetch POST})
};
const response = fetch('example URL', initOptions);
const data = response.json();

in the code example above we are saving the options of our request to a const variable initOptions and passing this variable as the second paramater in our request. When creating request options there is plenlty of options to adjust a few are listed below

Method - sets request method to GET or Post.
Headers - add headers to the request.
Mode - request mode (cors, no-cors, or same-origin).
Cache - string that determines how a request will interact with a browser.
Credentals - what browsers do with credentials.

Additional fetch() init options and how to use them can be found here
https://developer.mozilla.org/en-US/docs/Web/API/fetch

Response Error Handling
Errors with HTTP request are handled with the response object properties. Response.ok and Response.status are two propeties returned that are usufal in error handling. Response.ok represents a boolean value to represent a successful response. Response.status will display HTTP codes 200 for success and a 404 code if no resource was found. Heres a look at a response object from www.boredapi.com. Response.ok is true and Response.status is 200 showing a successful request

JavaScript fetch API is an excellent tool for handling HTTP requests, and its simplicity makes it easy to use. By using fetch, we can fetch data from the server, send data to the server, and handle errors with ease.

DEV Community: AndrewCabana

What is the UseEffect Hook and How to use it properly

Exploring JavaScript Fetch API