DEV Community: Dev. Zubby Okere

WHAT ARE COOKIES AND SHOULD YOU ACCEPT THEM?

Dev. Zubby Okere — Tue, 25 Jul 2023 16:40:12 +0000

Introduction

We all have visited different websites and the first thing we’re welcomed with are cookies! For some people, this is annoying as it’s not exactly what they came to the site to look for. People just want to surf a website and go their way. But what if I told you that cookies can be good for you and you should probably take them, you’d ask me why, right?

Well, this article is going to teach you everything you need to know about cookies, why you keep getting them, what they do for you and why they won't stop coming.

You don’t need to have any in-depth technical knowledge about websites, web development, HTTP requests and programming to follow this article. Everything is going to be broken down in an easy to understand way.

What are cookies

Well, cookies are just pieces of code or text files sent and received from a web server to a web browser. That sounds simple, right? They are shared between your browser, (Chrome, Firefox, Safari, etc.) and a server. This text file or code, when stored on your browser or computer gets pieces of information about your preferences on a website, login credentials, language selection, browsing pattern or behavior and much more. Google describes it as “small pieces of text sent to your browser by a website you visit.” They help that website remember information about you when you visit. Now, imagine you logged in to a website and after logging in, you try to purchase some items, then you click on add to cart, instead of adding to cart, you’re then taken to the login page, again, for you to login. Crazy, right? That’s going to make your web experience horrible! Or take for instance, you’re filling a form, a very long and important one, then you get on a call, thereby exiting the browser and when you’re done, you can’t find any information you entered in the form again, how would that make you feel? You’d feel really bad and exhausted. Cookies are files placed by a website on your browser to get crucial information about your activity on that website and help remember your choices. This communication happens between your browser and the website you visit. So, when you get on a call while filling that form, you return back and continue from where you stopped. It could be your language preference, say English, when you leave the site and return weeks later, you don’t have to select your language preference again because you accepted cookies. The website recognizes it’s YOU, your computer, technically, using a special ID which will be talked about much later in this article. To summarize this session, cookies can be seen as a tag given to you for an event. An access tag. You get into the event with your tag, but then go outside to talk to some people and then return. The only way they’d recognize you as someone that’s supposed to be in that event is by using your tag. If you lose your tag, they won’t remember anything about you anymore. Cookies are tags that are exchanged between websites and browsers.

Types of cookies

Now, there are different types of cookies and they all have different functions that they perform, but they are sent to track and get information about your activities on a website. There are so many types of cookies, but this article will cover only four of them that are the most relevant, including:

First party cookies: First party cookies are cookies sent or set by a website you’ve directly visited. Let’s say you visit stackoverflow, the website will set a cookie which will be saved on your browser. This cookie could be used to get the number of views, sessions, selections, settings and other data that need to be tracked by that website. It could be your preferences, links you clicked on and other details which could be sold to advertisers for targeted ads. That’s why when you visit a site like YouTube and watch some videos, you begin to get recommendations that are based on your choices when you visited YouTube. The same thing applies to your search engine, when you type in keywords to search for anything, that search engine remembers those keywords for a long time, that’s the work of cookies.

Third party cookies: These cookies are set to your browser by a different website other than the one you’re currently visiting. Take for instance the websites you see advertising on a website you visited, they could set cookies to get information about your browsing pattern, what you purchase, links you click and so much more. These could be used for research purposes, for marketing and tracking, helping them make more targeted and relevant ads and increasing the chances of conversion. Though there have been privacy concerns about third party cookies and also increased scrutiny on them.

Session cookies: Session cookies are more like temporal cookies. These cookies are set by a website just to track user activities on that website, sessions, authentication details, etc. they’re mostly used by e-commerce sites. Take for instance, you visit an e-commerce site, while navigating the site, adding items to cart, cookies are used to remember what you’ve added to cart and also to remember that you’re still logged in. You wouldn’t have to re-add items to cart again because you lost them while browsing other items while on that e-commerce site. This cookie “remembers” that you are still authenticated and continues to give you access to protected routes on a website and this session ends when you logout or close tab. This cookie has a very short lifespan and expires within a short period of inactivity or when you close the tab the website is on. They’re only used for navigating a website or session management.

Persistent cookies: A persistent or permanent cookie is one whose expiration date has been set to a much later date. It doesn’t expire when you close your tab or browser. However it can be deleted from your browser, manually. This type of cookie can also be updated, for instance when you visit a website, the website stores your settings and preferences. When you visit some other time and make new selections, the website updates them to its memory because you already accepted cookies earlier on and it recognizes your browser, using a unique ID, when you return. Whenever you visit a website and signup and then you visit at a later time, the website doesn’t ask you to signup again, instead, it fills your details and all you have to do is login. That’s how persistent cookies work. Publishers use persistent cookies to track user activities for a long time, detect patterns and also make some analysis.

Secure cookies: According to the MDN Web Docs, “A cookie with the Secure attribute is only sent to the server with an encrypted request over the HTTPS protocol.” What that means is that, it’s not going to be sent with unsecured HTTP. These types of cookies have an extra layer of security to protect sensitive data from being exposed and also man-in-the-middle attacks. Whenever a web server sets a cookie when sending a response to a browser, with the “secure” attribute, the browser will only include that cookie in subsequent request if that connection is secure (HTTPS) and if it isn’t (HTTP), the cookie will not be sent, just to preserve sensitive information.

Uses of cookies

By now, you probably already have an idea of what cookies are used for since we have already talked about what they are and their types. Cookies are an essential part of the web as we have it today. When a request is sent from a browser to a server, it’s done through a stateless HTTP protocol, which means that every request is treated as independent and isolated and the server doesn’t retain any information about past clients. So, cookies were introduced to enable websites remember visitors or IDs from a particular browser, irrespective of the number of times that website is visited. Who has this benefited the most, you or big corporations? Well, you’ll know when you read about the uses of cookies below:

Advertising and targeting: This certainly benefits organizations more because they want your precious data, your web interactions, your preferences and literally every activity that happens when you visit websites. They analyze these data and tailor ads that are relevant to you. This is surely a big win for them because if you were clicking on links related to sneakers, you’d begin to magically see ads related to sneakers when surfing the internet.

Session management: Now, this is one good use of cookies that benefits everyone, especially in terms of user experience and efficiency when browsing the internet. When you login to a website, for example, a session ID is generated for you by the website’s server. A session cookie is then set to your browser using the session ID. This is used to identify you, when you login and to give you continuous access to protected areas and also, preferences, when still logged in. This is what is referred to as a session. Just like the analogy of the event attendant was used, you don’t want to leave for a while and then return to start afresh. Another useful example is when you’re filing out a form and input wrong details, when the browser refreshes, it keeps the other pieces of information you entered and displays the appropriate error messages. This is what session cookies do. Once you’re done or close that tab, the session ends.

Performance and optimization: This is also beneficial to everybody because when cookies store some data on the user’s browser, it reduces the amount of data that needs to be sent when a request is made from the browser to the server, this data includes; session IDs, user preferences and even authentication tokens. That way, there’s faster page load and response rate and lower data payloads and overall performance.

Cookies and the law

There are serious privacy concerns about users being presented with cookies when they visit websites. A lot of users don’t know what cookies mean, hence this tutorial, but how does the law protect you from big corporations that want your data all the time, especially the once that use it for sinister motives? Are users data really safe on the internet or are they being given away or sold to organizations that want your data at all cost, just for their own benefit (to your own detriment)? Even though they differ by region, here’s what the law says about cookies below:

General Data Protection Regulation (GDPR) in the European Union: This is an EU law that mandates how organizations are supposed to use personal data. It stipulates that personal data has to be used in a friendly way and that users must consent to it. This law largely applies to the European Union member states and it defines personal data as “any information which, directly or indirectly, could identify a living person. Name, phone number, and address are schoolbook examples of personal data. Interests, information about past purchases, health, and online behaviour is also considered personal data as it could identify a person.” The law also states that users should have full control over their choices and preferences. To learn more about it, click here

California Consumer Privacy Act (CCPA) in the United States: This law obviously applies to California customers and it stipulates that customers reserve the right to know about the personal data businesses collect from them and how they are going to use this data. Businesses are expected to disclose the uses of cookies and also give users the option of opting out when they like. To learn more about that, click here.
In conclusion, every country has a law protecting consumers and their interests, just like the European Union and California. It’s very necessary to know what the law says in your own country and how it benefits or protects you, just to keep yourself safe on the internet.

Should you accept cookies
Well, cookies are meant to be taken or rejected, so I’d say yes and no! If you’re visiting a website and don’t trust that website, you can refuse all cookies. But then, again, it all depends on your privacy concerns, the functionality you want on the website and security concerns, also. If none of these things bother you, you can accept all cookies.
It’s also worthy to note that websites offer options based on the cookies they want you to accept. There are “necessary cookies” which are in most cases the default. There’s also the “all cookies” option, this will give the website full access to everything that it wants about you, track your activities on the website and also analyze your preferences. However, some websites offer you the opportunity to customize cookie preferences, this offers you more options on what you want.

Conclusion
Cookies allow us have the best experience when we visit websites. It’s part of the advancement of the internet and have become an intricate part of the web. While they help in navigating websites efficiently and smoothly by remembering our data, managing sessions when we login, providing analytics and data, there are also privacy concerns and that’s why it’s necessary to be educated on what cookies are and how they relate to you. People should choose their own preferences based on what aligns with them while surfing the internet.
To learn more about. Ponies, click here.

10 React Hooks And How To Use Them.

Dev. Zubby Okere — Sun, 23 Jul 2023 08:17:08 +0000

INTRODUCTION

There is no modern React, today, without React hooks. They are a core part of React. React hooks give functional components access to states and other React features. They were introduced in Version 16.8 of React and introduced a better way to write React, use state, and so many features in functional components. React encourages developers to use functional components together with hooks in building projects and to get rid of class components which is more difficult and would mean you have to manage state and lifecycle methods within a class component. Hooks provide a modern way to build components and just like React, gets a lot of support in the React community and ecosystem. With that said, this article is going to be beginners friendly, but would get a bit more complex with more advanced React hooks like useImperativeHandle, useMemo & useCallBack, etc.
React divides all built-in React hooks into the following;
State Hooks (useState & useReducer).
Context Hooks (useContext).
Ref Hooks (useRef & useImperativeHandle).
Effect Hooks (useEffect, useLayoutEffect & useInsertionEffect).
Performance Hooks ( useMemo & useCallBack, useTransition & useDeferedValue).
Other Hooks (useDebugValue, useId & useSyncExternalStore).

State Hooks

1. The useState hook: The useState hook is simply a hook that lets you add a state variable to your component. The state makes a component to “remember” something like a user input or value. For us to use the useState hook, just like every other hook, we have to import useState at the top, into our component, as you can see below;


import { useState } from "react";

After that, you have to initialize state at the top of your functional component, take a look at the code snippet below;


function UpdateCounter() {
  const [count, setCount] = useState(0);
}

The convention here is that you’d have a current state and a function to set or update the state. Take a look at the example above for reference and how “count” and “setCount” is used to update the count state.
Below is a simple counter app with “useState.”


import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

In the code snippet above, we imported useState, declared/initialized it at the top level of the functional component and then in the increment function, we use the “setCount” to update the count. That’s how we changed the state. Since the state “remembers”, we call the increment function in the button and then, the count is updated as shown in the “p” tag. That’s a very simple and basic example here. Always remember that we can set our initial state to a string, Boolean, number(just like we did above), null, object & array.

2. The useReducer hook: This particular hook is an alternative to the useState hook. It also has to be called at the top of your component, and also, you have to import useReducer from React. Below is a simple counter app with “useReducer”;


import { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

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

  const increment = () => {
    dispatch({ type: 'increment' });
  };

  const decrement = () => {
    dispatch({ type: 'decrement' });
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

There aren’t so many use cases where you use the “useReducer” hook, but it’s also good to know.

Context Hook

3. The useContext hook: This particular hook is necessary for accessing shared data across components without having to do that with props (props drilling). It’s basically a way for you to manage states, globally. When you want to pass states without managing it with “useContext”, you’d have to pass props from one component to another and another. You also have to remember that “useContext” is used alongside the “useState” hook. Take a look at the code below;


import { useState } from "react";

function Component1() {
  const [user, setUser] = useState("Mr. Zubby");

  return (
    <>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </>
  );
}

function Component2({ user }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 user={user} />
    </>
  );
}

function Component3({ user }) {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 user={user} />
    </>
  );
}

function Component4({ user }) {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 user={user} />
    </>
  );
}

function Component5({ user }) {
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

Component 2-4 didn’t have any use for the data that they shared. It wasn’t used in the components, but they just had to share it, like a dummy component. It’s finally used in the fifth component. This could be a real issue if you are working on a large project and take for instance, you want to share a user login details across different components, you’d have to go the long route. But with “useContext” hook, you can solve that easily.
To use the “useContext” hook, you’d have to import “createContext” from React and also initialize it. It’s also very important to note that it’s good practice to create a separate file which you can name literally anything you like. Let’s use “contextTuts.js.” Take a look at the updated code below;


import { useState, createContext } from "react";
const UserContext = createContext()
import React, { useState, createContext } from "react";

import Component1 from "./Component1";
import Component2 from "./Component2";
import Component3  from "./Component3";
import Component4  from "./Component4";
import Component5  from "./Component5";


export const UserContext = createContext();

function ContextTutorial() {
  const [userName, setUserName] = useState("Okere Josiah");

  return (
    <UserContext.Provider value={{ userName, setUserName }}>
      <Component1/> <Component2 /><Component3/><Component4/> <Component5/> 
    </UserContext.Provider>
  );
}
export default contextTuts;

Using the above code snippet, let’s assume that you created a file called ContextTuts and that other components from 1-5 are different files. Having this in mind, we can now send data to all the five components, and use it in any of the components we want to use the data in. To do that, you have to import the “useContext” at the top and also import UserContext from the ContextTuts file take a look at the code below;


import React, { useContext } from "react";
import { UserContext } from "./ContextTuts";

function Component2() {
  const { setUsername } = useContext(UserContext);

  return (
    <div>
      <input
        onChange={(event) => {
          setUsername(event.target.value);
        }}
      />
    </div>
  );
}

export default Login;

This way, in Component2, a user will be able to set username, easily, because the “setUserName” function has already been sent to it (Component2) directly, without having to pass it around through different components. Now, Component2, just like with other components, is where the username can be set to another username. The “useContext” hook simplifies props drilling.

Ref hooks

4. The useRef hook: The “useRef” hook is easy to understand but there aren’t too many use cases where you’d have to use it. As the name implies, it is used to make a reference or to access and, or manipulate the dom. This is fine without triggering a re-render. So, essentially, the “useRef” hook is important when you don’t have to render or re-render anything in the DOM. To be able to use the useRef hook, you’d have to import it from React, as you can see below;


import { useRef } from 'react';

Then inside your component, you can call the “useRef” hook and pass the argument you want. You can access the value of a ref using the “ref.current property”. The code below explains an example where we can use the “useRef”.


import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleIncrement() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleIncrement}>
      Click button 
   </button>
  );
}

The “handleIncrement” function is passed to the button to increase “ref.current” when the button is clicked. The “ref” could point to anything at all, it could be an object, a string and a function. According to the React doc, “Unlike state, ref is a plain JavaScript object with the current property that you can read and modify.” Just to reiterate, you should also note that unlike state, the “ref” doesn’t trigger a re-render. To conclude on “useRef”, using another example code below, we can focus on an input by clicking the button beside it and then start typing on the input and we can also clear whatever has been typed in an input by clicking the same button, all done without a re-render. Check the code snippet below;


import React, { useRef } from "react";

function RefTutorial() {
  const inputRef = useRef(null);

  const onClick = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <h1>Pedro</h1>
      <input type="text" placeholder="Ex..." ref={inputRef} />
      <button onClick={onClick}>Change Name</button>
    </div>
  );
}

export default RefTutorial;

In the code snippet above, we can focus on the input by clicking on the change name button. In the updated code below, we can clear input;


import React, { useRef } from "react";

function RefTuts() {
  const inputRef = useRef(null);

  const onClick = () => {
    inputRef.current.value = "";
  };
  return (
    <div>
      <h1>Josiah</h1>
      <input type="text" placeholder="Enter any text..." ref={inputRef} />
      <button onClick={onClick}>Change Name</button>
    </div>
  );
}

export default RefTuts;

In this updated code, we can clear what’s been typed by clicking on the same “change name” button.

5. The useImperativeHandle hook: This hook also falls under the Ref hooks and it is commonly used together with the “useRef” hook. It’s only used in very specific kinds of situations. This hook allows us to define functions based on a “ref” that can be called by using that “ref.” To break it down further, with the “useImperativeHook”, you can perform an action on a component, from outside the component, a separate component. It could be a parent and child component. You could do something, on either component, by referencing the component you want to perform an action on. To get a clearer understanding of how it’s used, check the code snippet below;


import Button from "./Button";

function UseImperativeHandle() {
    return (
    <div>
      <button>
        Button From Parent
      </button>
      <Button/>
    </div>
  );
}

export default UseImperativeHandle;

In the above code, we have a simple component (parent component) that returns jsx and a “”, which is another component (child component), called inside of it.
And in the code below, we have another component, which is the child component that gets called in the parent component, check the code below;


import React, {useState } from "react";

const Button = () => {
  const [toggle, setToggle] = useState(false);
  return (
    <>
      <button onClick={()=> {setToggle(!toggle)}}>
Button From Child
      </button>
      {toggle && <span>Toggle</span>}
    </>
  );
};

export default Button;

In the code above, we have a functional component named “Button”, with useState called at the top, initialized as a Boolean “false”. Then we have a simple toggle function in the button. Very simple, you already know that.
Now, to do this differently, we want to set the toggle to true and to false, but from the parent component and not in the child component (Button) in the immediate code above. The updated code show us how to do that below;


import React, { useRef } from "react";
import Button from "./Button";


//parent component below

function UseImperativeHandle() {
  const buttonRef = useRef(null);
  return (
    <div>
      <button
        onClick={() => {
          buttonRef.current.alterToggle();
        }}
      >
        Button From Parent
      </button>
      <Button ref={buttonRef} />
    </div>
  );
}

export default UseImperativeHandle;

//child component below

import React, { forwardRef, useImperativeHandle, useState } from "react";

const Button = forwardRef((props, ref) => {
  const [toggle, setToggle] = useState(false);

  useImperativeHandle(ref, () => ({
    alterToggle() {
      setToggle(!toggle);
    },
  }));
  return (
    <>
      <button>Button From Child</button>
      {toggle && <span>Toggle</span>}
    </>
  );
});

export default Button;

In the child component, we simply imported the forwardRef which we used to wrap the Button component (child component) this will enable us to pass data, including props and ref as seen in the code above. Then we imported the useImperativeHandle and set its function, passed the “ref” in it, and also initialized a function called “alterToggle()” and then passed the “setToggle(!toggle)” which is used to change the state to its opposite (remember this is done in the parent component called useImperativeHandle).
Then remember in the parent component above, we setup a function in the button which will call the alterToggle function that was created in the Button component (child component). We can now access the function by using “buttonref.” Remember that this “buttonref” was initialized in the parent component which is the UseImperativeHandle, and that’s how we are going to reference the alterToggle function. That way, we can now alter the value of the state, even though the state is set up in the child component (Button). So, we are now performing an action on a different component(Button), from another component entirely(UseImperativeHandle). This is similar to the “useRef” hook but in this case we are referencing another component.

Effect Hooks

6. The useEffect hook: This is a really popular hook, it’s almost as popular and commonly used as the “useState” hook and it’s actually used together with the “useState” hook, most of the time. This hook is mostly used when we want to fetch data or connect to an external database. The “useEffect” hook simply connects a component to an external system. It’s used to fetch data, for cleanup functions, dependencies and re-renders, event listeners, etc. for this article, an example of how to use the “useEffect” hook to fetch data will be shown here, because that’s the most common use of the “useEffect” hook. To learn more about its different uses, click here. How to use the “useEffect” hook to fetch data from a database and store it in a state will be shown in the code snippet below;


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

Const EffectComponent=()=>{
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetching  data from an external API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);
  // the rest of the code for your component goes in here 
}
Export default EffectComponent;

The empty dependency array in the code above “[]” tells the effect to run only once immediately the component mounts. It will be a costly mistake to avoid putting it because you’d end up making endless calls and that wouldn’t be good for your project.
With the “setData” function, we store the data that has been fetched in the “state” above called “data” and that’s why the “useState” and “useEffect” are usually imported together.

7. The useLayoutEffect hook: This is a variation of the “useEffect”, though it is rarely used. According to the React documentation, there’s one pitfall: “useLayoutEffect can hurt performance.” They also said we should “Prefer useEffect when possible.”
The “useLayoutEffect” hook happens synchronously after all DOM mutations have already happened but before the browser repaints the screen. It’s best used for tasks that need access to the DOM and also measuring layout before any content is displayed on the screen. Since it runs before the browser repaints the screen, it’s commonly used for measuring layout, like calculating the dimension of an element.
In the code snippet below, “useLayoutEffect” is used to measure the height of an element and also update the state with the height of that element. Let’s have a look at the code snippet below;


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

function HeightMeasurement() {
  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    // Measurement for the height of the element
    const exactHeightMeasurement = elementRef.current.clientHeight;
    setHeight(exactHeightMeasurement);
  }, []); //The  empty dependency array makes sure this runs only once, similar to componentDidMount

  return (
    <div ref={elementRef}>
      <p>The measured height of this element is: {height}px</p>
      {/* ... Any other content... */}
    </div>
  );
}

Remember the useRef was also imported to make a reference to the div element. To study more on useEffectLayout, click here. Just to recap, the “useEffect” is almost one hundred percent more performant than the “useLayoutEffect” and also the “useLayoutEffect” runs synchronously after React has performed every DOM mutation but just before the browser repaints the screen.

Performance hooks

8. The useMemo hook: This is a more advanced hook which is used to enhance the performance of our application. It’s used when complex computation is done. Think of it as value caching just to prevent re-computation. For example, when you have a function that takes some data or input and returns some result, the “useMemo” will be useful in “remembering” the result, provided the input doesn’t change. If inputs remain the same, React will return the “memoized” version instead of a re-computation happening. This re-computation could be very expensive, especially when dealing with a lot of data, and also reduce the performance of your React application.
In the “useMemo” hook, there is a dependency array which contains dependencies. If any of the dependencies change, the function in “useMemo” will execute another time and this will return a new “memoized” result. Take a look at the code snippet below to get a clearer understanding;


import { useState } from "react";

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const computation = expensiveComputation(count);

  const incrementCount = () => {
    setCount((e) => e + 1);
  };
  const addTodo = () => {
    setTodos((c) => [...c, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <br/>
      <div>
        Count: {count}
        <button onClick={incrementCount}>+</button>
        <h2>Expensive Calculation</h2>
        {computation}
      </div>
    </div>
  );
};

const expensiveComputation = (num) => {
  console.log("Computing...");
  for (let i = 0; i < 1000000000000; i++) {
    num += 1;
  }
  return num;
};

So, in the code snippet above, the “expensiveComputation” function will always run when a new todo is added, which isn’t healthy practice, performance wise. To fix this issue, in the updated code snippet below, the “useMemo” is used to wrap the “expensiveComputation” function call and a dependency array will be added which comes in as a second parameter. The “expensiveComputation” function will only run when its dependencies change. This means that the “expensiveComputation” function will run when the “count” state is changed and not when a new todo is set. Kindly reference the updated code below;


import { useState } from "react";

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [todo, setTodo] = useState([]);
  const computation = useMemo(()=>expensiveComputation(count), [count]);

  const incrementCount = () => {
    setCount((e) => e + 1);
  };
  const addTodo = () => {
    setTodo((c) => [...c, "New Todo"]);
  };

  return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todo.map((item, index) => {
          return <p key={index}>{item}</p>;
        })}
        <button onClick={addTodo}>Increment Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={incrementCount}>+</button>
        <h2>Expensive Calculation</h2>
        {computation}
      </div>
    </div>
  );
};

const expensiveComputation = (num) => {
  console.log("Computing...");
  for (let i = 0; i < 1000000000000; i++) {
    num += 1;
  }
  return num;
};
export default ExpensiveComponent;

Also note that “computation…” will log only once to the console when the “addTodo” button is clicked, but it will log to the console as count is increased, because the “useMemo” hook is used this time around.
Summarily, the whole point of the “useMemo” hook is to increase performance and decrease latency.

9. The useCallBack hook: The “useCallBack” hook is very similar to the “useMemo” hook, but the very slight difference is that, while the “useMemo” hook is also used for “memoization”, it returns a value. The “useCallback” hook on the other hand returns a function. The “useCallback” hook also takes a function and a dependency array, but returns a “memoized” version of a function.
Just like the “useMemo” hook, the “useCallback” hook is also used for optimization and performance enhancement, and avoiding unnecessary re-renders. This is necessary especially when passing down functions as props, from parent component to child component, because a change in function reference in the parent component, for example, can trigger a re-render in the child component, even if nothing has changed in the function logic. Also, remember that the dependency array in the “useCallback” is optional. Once there’s a change in the dependency array, then there will be a re-render. That will be the only condition for a re-render. If there isn’t a dependency array, then the function will be “memoized” on the initial render and subsequent re-render. The code snippet below shows how it’s used;


// Parent.js file

import { useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
 const [count, setCount] = useState(0);
  const handleCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

   return (
    <div>
      <button onClick={handleCount}>Increment Count</button>
      <ChildComponent onClick={handleCount} />
    </div>
  );
};

export default ParentComponent;

In the above code, whenever the button is clicked and the “count” state incremented, there will be a re-render in the child component which is imported into the parent component called “ ParentComponent” and a new version of the “handleCount” function will be returned, even though nothing’s changed in the “handleCount” logic. This happens because there’s a change in the state of the parent component and the parent component also re-renders. To prevent this expensive re-render in the child component, we use the “useCallback” hook. The updated code below shows how to use it and prevent unnecessary re-renders;


// Parent.js
import { useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
 const [count, setCount] = useState(0);
  const handleCount =  useCallback(() => {
    setCount((prevCount) => prevCount + 1)
  },[]);

   return (
    <div>
      <button onClick={handleCount}>Increment Count</button>
      <ChildComponent onClick={handleCount} />
    </div>
  );
};

export default ParentComponent;

Now, with this updated code, “handleCount” will now be “memoized” and the same version or reference of the logic will be retained between re-renders unless there’s a change in the dependency array. This means that the child component will not re-render even if the parent component re-renders as a result of the state change.
Finally, if the dependency array is empty, the function will be memoized on initial render and there wouldn’t be any change in between renders. You can add dependencies to the array to suit the result you want. The one in the code above is empty.

10. The useTransition hook:* This is a pretty recent hook, included in React 18 and also classified as a performance hook by React. It’s a hook that lets you update the state of an application without blocking the UI. It can be used to improve the performance and responsiveness of your application. This hook is really easy to implement. Though not very popular and not used as much as others, it’s still very useful. It tells React to treat some state changes as not so important. That means the rendering of a component can happen, while the “useTransition” hook is used to render other state changes much later and without blocking the UI. The code snippet below explains how to implement it better;


import React, { useState, useTransition } from "react";

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

  const [isPending, startTransition] = useTransition({
    duration: 2000,
    easing: "ease-in-out",
  });

  const handleClick = () => {
    startTransition(() => {
      setCount(count + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      {isPending ? (  <p>Loading…</p>
     ) : ( <p>The count is {count}</p>})
    </div>
  );
};

In the code snippet above, when the button is clicked, the “startTransition” which is from the “useTransition” hook will be triggered and it will update the count state after 2000 milliseconds. So the “useTransition” hook is used to update the state of the count variable. Then the “isPending” which is a part of the “useTransition” array is a Boolean which is used to indicate whether the “startTransition” is pending or has been executed. Of course, we have to import the “useTransition” hook from React and every other thing is as easy as it gets!

Other Hooks:

The useInsertionEffect hook: This hook is a version of the “useEffect” hook that fires before any DOM mutation happens. According to the React documentation, they said there’s one pitfall; “useInsertionEffect is for CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want useEffect or useLayoutEffect instead.” To learn more about it, click here.
The useDeferedValue hook: This particular hook, as the name implies, is used when you want to defer updating a part of the UI. Click here to learn more about it.
The useDebugValue hook: According to the React documentation, “useDebugValue is a React Hook that lets you add a label to a custom Hook in React DevTools.” Click here to learn more about it.
The useId hook: This is a hook that is used for generating unique IDs that can be passed to accessibility attributes, according to the React documentation. Read about it here.
The useSyncExternalStore hook: This is a hook that allows Components subscribe to an external store. More about that here.

In conclusion, with the introduction of React hooks since version 16.8, hooks have revolutionized the way we write React code. With hooks, the need for class components isn’t there anymore because it’s now easier to reuse and share state logic. It has also enchanted the readability and maintainability of code. Today, there’s no React without React hooks.

Kindly like, comment and share your thoughts. Also follow me on Twitter here.

HOW TO SETUP FIREBASE AUTHENTICATION ON A REACT PROJECT

Dev. Zubby Okere — Thu, 13 Jul 2023 08:36:41 +0000

INTRODUCTION

Setting up a method of authentication for users is a really good way of improving the outlook of your web application. You might have some protected routes that you only want authenticated and signed in users to have access to. There are many ways to set up authentication, including using a backend, using Nextjs authentication or firebase authentication, among so many others. This article is going to cover authentication with firebase. Firebase is a technology that provides a lot of backend services. It is generally referred to as backend as a service(BaaS). It’s owned by google and provides a wide range of services including; real-time database, cloud storage, hosting and authentication, which is what we’d cover in this article. Before you continue, this tutorial is for those who are already comfortable using React and not for absolute beginners.

Authentication With Firebase

Authenticating users using firebase is very simple, using the firebase SDK, you can set up authentication with phone numbers, email and password, which is the most popular. You can also set up authentication with other third party services like Google, Twitter, Apple, Microsoft, Facebook, GitHub, etc. Authentication with firebase can be used for web applications, iOS applications, android applications, etc. and with a lot of programming languages and frameworks. This article is going to cover authentication for web applications and more specifically, authentication with email and password, in React. Auth and authentication will be used interchangeably throughout the course of this article, they both mean the same thing.

Getting Started With Email/Password Authentication

Before you integrate firebase authentication in your React project, you’d have to have a google account which you’d then use to create a firebase account. After doing all the necessary authentication, you click here to get started with a new project. When you get in, click on the “get started” button you see. It will lead you to a page where you can add a project. Click on the “add project” button to add one. Give the project a name. It could be anything. You could use “my-auth-project,” if you like. And then, continue. You’d be asked to enable google analytics for the project, you can decline that and click on “create project.” Wait some seconds for it to create your new project. Now that your new project has been created, click on “continue.” You’d get to an interface where you’d see many options, you can choose whatever you want to implement. For auth, click on authentication and that will lead you to a new interface where you can choose how you want to authenticate users. Click on email/password. After that, make sure you enable email/password and click on save. You’d see a new interface, an empty one without any authenticated user.
Now navigate to VSCODE and create a new React project using “npx create-react-app auth”, “auth” is the name of the react project here. You can give it any name or just give a space and add “.”, After CRA. After that, make sure you’re in the auth directory and install firebase into your application using; “npm i firebase”, this will install firebase for you. Now go back to firebase, to the project you created initially and click on the web project icon “</>” you see there. The third one from the left. Just like you can see in the image below;

Now give it a nickname as they’ve requested. It could be any name. After you’ve done that, click on “register” app. This will lead you to another interface where you’d be required to install firebase using Npm. We already did that. Now, skip that and move to the next, which is copying the code firebase has provided. Create a firebase.js file on the src directory, this is where you’d paste the code to initialize firebase in your React application. This is where all of your firebase configurations for your React project will happen. Again, the pasted code is used to initialize firebase in your application. Take a look at the code snippet below;

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyARMzfqJbdwtsPVQCiR0qEM96P_fj1acuE",
  authDomain: "my-auth-project-744de.firebaseapp.com",
  projectId: "my-auth-project-744de",
  storageBucket: "my-auth-project-744de.appspot.com",
  messagingSenderId: "908733099316",
  appId: "1:908733099316:web:089d2658ec0910dc148961"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

Remember to use your own, they are all unique, both project and app IDs and keys.

Now that you’ve done that, you have to tell firebase that you are using authentication on your project and how you’d do that is by initializing firebase auth in your firebase.js configuration. Check the updated code below;

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyARMzfqJbdwtsPVQCiR0qEM96P_fj1acuE",
  authDomain: "my-auth-project-744de.firebaseapp.com",
  projectId: "my-auth-project-744de",
  storageBucket: "my-auth-project-744de.appspot.com",
  messagingSenderId: "908733099316",
  appId: "1:908733099316:web:089d2658ec0910dc148961"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Authentication and get a reference to the service
export const auth = getAuth(app);
export default app;

By initializing firebase auth in the code above, you’ve now added a reference to the firebase authentication service.

Implementing authentication in your project

Now that you have done the necessary configurations, you have to start implementing authentication in your project. You can do this however you like, but this is going to be a very simple one with no styling at all, it will be mainly focused on the logic of implementing authentication in your project. Now, create a components folder and in that folder, create another one. You can call it “auth”. In this “auth” folder, create two files. I’d call these files “signUp” and “signIn”, you can do the same.

In the signUp file, create a functional arrow component using the VSCODE shortcut, RAFCE, create a form and implement the logic. Take a look at the code snippet below on how to implement the signup functionality;

import React, {useState} from 'react';
import {  createUserWithEmailAndPassword  } from 'firebase/auth';
import { auth } from '../firebase';

const Signup = () => {
   const [email, setEmail] = useState('')
    const [password, setPassword] = useState('');

    const userSignUp = (e) => {
      e.preventDefault()
createUserWithEmailAndPassword(auth, email, password).then((userCredential) => {
            // Signed in
            const user = userCredential.user;
            console.log(user);

        }) .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode, errorMessage);

        });


    }

  return (
<section>
   <div>
      <div>                  
        <h1> Create Account <h1>                                                                            

<form onSubmit=“userSignUp”>                                                                                          
 <div>
  <input type="email"
  value={email}
  onChange={(e) =>      setEmail(e.target.value)}  
 required                                    
  placeholder="Enter your email address…"/>
 </div>

<div>
 <input type="password"
 value={password}
 onChange={(e) => setPassword(e.target.value)} 
required                                 
placeholder="Enter your password…" />
 </div>                                             
 <button type="submit" 
onClick={userSignUp}>  
    Sign up                                
 </button>
                                                                     </form>
</div>
 </div>
 </section>
  )
}

export default Signup

Using the code snippet above, you’d be able to easily create a signup functionality in your application using firebase.

In the signIn file, use RAFCE, which is a VSCODE shortcut for creating a functional arrow component. And create a form and implement the logic for signing in users, you can use the code snippet below;




import React, {useState} from 'react';
import {  signInWithEmailAndPassword   } from 'firebase/auth';
import { auth } from '../firebase';

const Login = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const userLogin = (e) => {
        e.preventDefault();
        signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // Signed in
            const user = userCredential.user;
             console.log(user);
        }) .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode, errorMessage)
        });

    }

    return(
        <>

                <section>
                    <div>                                            
                        <p>Login into your account</p>                       

                        <form>                                              
                            <div>

                                <input 
                                    Value=“email”
                                    type="email"                                    
                                    required                                                                                
                                    placeholder="Enter your email address…"
                                    onChange={(e)=>setEmail(e.target.value)}
                                />
                            </div>

                            <div>
                             <input 
                                value=“password”
                                type="email"
                                required
                                placeholder="Enter your password…"
                                onChange={(e)=>setPassword(e.target.value)}/>
                            </div>

                            <div>
                                <button onClick={userLogin}>      
                                    Login                                                                  
                                </button>
                            </div>                               
                        </form>


                    </div>
                </section>

        </>
    )
}

export default Login

The code above handles authentication for users that have already signed up and just have to sign in.

For the signup functionality, once a user signs up, it reflects on your firebase console. You get to see the details of the user that just signed up. You’d see the time stamp, the provider, and also the unique user id.

The next functionality is an authentication state observer which is going to check which user is signed in and how a user that’s signed in can sign out. This can be created in another file which you can name authDetails.js or anything you like. Check the code snippet below:


import React, { useState, useEffect } from 'react';
import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from '../firebase';

const AuthDetails = () => {
Const [authUser, setAuthUser]=useState(null)

    useEffect(()=>{
        onAuthStateChanged(auth, (user) => {
            if (user) {
              setAuthUser(user)
              // User is signed in, see docs for a list of available properties
              // https://firebase.google.com/docs/reference/js/firebase.User
              const uid = user.uid;
              // ...
              console.log("uid", uid)
            } else {
              setAuthUser(null)
              // User is signed out
              // ...
              console.log("user is logged out")
            }
          });
        return ()=>{
            listen()
          }
    }, [])
 //this logic is for logging out a signed in user
const handleLogout = () => {               
        signOut(auth).then(() => {
        // Sign-out successful.
           console.log("Signed out successfully")
        }).catch((error) => {
        // An error happened.
        });
    }
  return (
    <div>        
//this shows if a user is signed in and the user email.
     {authUser ? <p>{`user is signed in as ${authUser.email}`}</p>
//this button is for logging out a signed in user
<button onClick={handleLogout}>Sign Out</button>
: <p>User signed Out</p>
//if the second condition is met, that means user is signed out, the text “User signed Out” will show.
    </div>
  )
}

export default AuthDetails

In conclusion, firebase authentication is easy to implement and helps you register, sign in and sign out new users, seamlessly. I hope this was helpful. If you found this helpful, kindly follow me on Twitter or on LinkedIn and let’s connect.

Why NextJS?

Dev. Zubby Okere — Tue, 11 Jul 2023 15:58:05 +0000

WHY USE NEXT.JS FOR YOUR PROJECT?

INTRODUCTION
Web development has evolved so much over the years, we are now able to do so much while writing much less code and even, with less stress. There is a shiny new framework that comes out every month (just kidding, not every month ) and we have to keep up with all of them. Top of the list of these frameworks we have to learn is Next.JS, which is a framework for the web, built on React. It provides a whole lot of out of the box features and provides more tooling that makes our application perform better. We are going to be looking at the advantages of using Next.JS for building our web applications.

Server Side Rendering
Server Side Rendering also called SSR or Dynamic Rendering, enables your page to render user data on the server side and not the client side, this makes it to load fast, as it’s server side generated. This method of displaying data makes your web application load faster, reduces the amount of JavaScript that needs to be downloaded for your page to load. You can use SSR if your page needs to render data that changes with time. SSR can also help improve the SEO of your website. This is because your pages are rendered on the server side and search engines will be able to index your pages faster and easily. This kind of data is referred to as dynamic data. The main difference between static site generation(SSG) and server side generation(SSR) is that, with SSG, your page renders at build time while with SSR, your pages data render on request. The only time you should use SSR is when you want to render dynamic data which must be shown at request time. To render server side data, you use the “getServerSideProps” key word to fetch such data and pass it down to another component. Take a look at the code snippet below:


export const getServerSideProps = async () => {
  const res = await fetch('https://api.com)
  const data = await res.json()
  return { props: { data } }
}

The data will then be passed as props to the component below:


export default function Page({ data }) {
  return data
}

Another way of rendering data is using the Static Side Generation(SSG).

Static Side Generation
This is another way of rendering data on our web application. A web page that uses SSG is a web page that generates its HTML at build time. You can, however, generate pages on your web application without an external data, take for example, the code snippet below:


export default function Data() {
  return <div>Data</div>
}

This doesn’t need any data to be able to display anything on our web application. A HTML page is generated at build time.

Static Side Generation with data:

If your page depends on external data, then you can use “getStaticProps” to fetch the data. You might want to pre-render a list of product on your web application, at build time, you can do that using the code snippet below:
First, you’d have to export an async function that gets called at build time, using the keyword, “getStaticProps”, just like this:


// This function will be called at build time
export async function getStaticProps() {
  // Get data from an external api
  const res = await fetch('https://.../products)
  const products = await res.json()

  // By returning { props: { products} }, the Store component
  // will receive `products` as a prop at build time
  return {
    props: {
      products,
    },
  }
}

And this is where the products that were fetched will be rendered:


export default function Store({ products}) {
  // Render products...
}

Just to reiterate, SSG helps our web applications load faster, because data is rendered at build time. It also reduces loading time as a result of this.

Incremental Static Regeneration

This is another powerful way of rendering static data and also updating it, even after building your page. This is more like the best of both worlds; SSG & SSR. To be able to use ISR, you have to add the “revalidate” prop to the “getStaticProps” keyword. You can choose the number of seconds you want this data to be revalidated. When a request is made to an already built page with data pre-rendered, statically, it will show cached data. According to the Next.js documentation, “Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.” It also said that “After the 10-second window, the next request will still show the cached (stale) page”. This regeneration is triggered automatically by Next.JS in the background. Once the generation of a new page works fine, Next.JS will invalidate the old data and show you an updated one. If this fails, the old data will show and remain unaltered. Take a look at the code snippet below to be able to use ISR:


// This function will be called at build time on the server-side.
// It could be called again if;
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request is made
    // - At most once every 10 seconds because revalidation is set to 10 seconds.
    revalidate: 10, // In seconds
  }
}

The “posts” having been passed down as props is also received in the blog component below:


function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}
export default Blog

Lastly, using ISR can help boost SEO, faster loading time and also, flexible updates on your page, without having to rebuild your entire website from scratch.

Routing
This is one very powerful feature of Next.JS. It comes with a file based routing system, out of the box. Normally with React, we’d have to set up a Router after installing React-router-dom. With every version released, setting up React-router-dom became weirder and more difficult to understand, especially for newbies. Next.JS solves that problem by simply making the Routes in our Next.JS application pages based. Next.JS defined it as a “file-system based router built on concepts of pages.” That means, once you create a new file in the pages directory, it automatically becomes a new Route. All you have to do is to open up your application on your localhost and open up the new route created. You could create a folder named About and a file in it named page.js. The new route will be /about. It’s as simple as that. You could also nest folders into another, creating different routes. You could have pages/dashboard/contact/page.js and this would route to /dashboard/contact, contact being the destination page. Lastly, we can create dynamic routes very easily this way: pages/posts/[id].js and this will be accessible at posts/1 or posts/2 or posts/3, it’s that easy! Click this to learn more about dynamic routing.

Image Optimization
Images account for a very huge portion of a website’s weight and could slow down our web application, sometimes. Next.JS out of the box helps us to optimize images which then helps our web applications load much faster. Next.JS extends the HTML “img“ tag and therefore helps images added on websites lightweight, without having to compromise on quality of images. According to the Next.Js documentation, “Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders”. To be able to add an image to your Next.JS application, you have to first, import Image at the top level, in your code, just like you can see below:

import Image from 'next/image'

After that, you can define the source (src) of your image. It could either be local or remote. If it’s local, it can be added using the code snippet below:

import Image from 'next/image'
import userPic from '../public/me.jpg

export default function Page() {
  return (
    <Image
      src={userPic}
      alt="Picture of the user"
      // width={500} automatically provided for local images
      // height={500} automatically provided for local images    />
  )
}

However, if it is a remote image, the src will have to be a url string. You’d have to manually provide the width and height, since Next.JS doesn’t have access to this during the build process. Take a look at the code snippet below for example:


import Image from 'next/image'

export default function Page() {
  return (
    <Image
   src="https://mypicworld.com/my-home/profile.png"
      alt="Picture of my home"
      width={500}
      height={500}
    />
  )
}

For the second option, you’d have to go to next.config.js to define a list of supported URLs and you have to be specific as possible with the URLs. This will help you avoid any error that will come from using an external URL to display pictures. For example, the configuration below will only allow images from the declared URL:


module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: mypicworld.com/my-home
        port: '',
        pathname: '/my-home/**',
      },
    ],
  },
}

To learn more about Image optimization, click this.

In conclusion, before you start using Next.JS, you have to be familiar with JavaScript, this will help you understand Next.JS more because it’s a framework built on React. You also have to know React before moving to Next.JS. I can’t tell how much React and JavaScript you need to know, first, but I’d suggest you get comfortable with the two, building some cool stuff with both of them, before advancing further. To learn JavaScript, you can start here, to learn React, you can start here, also. Goodluck.