Forem: Michael Osas

Mastering Scalable React Apps. Your Ultimate Guide to High-Performance Development!

Michael Osas — Tue, 18 Jun 2024 18:31:41 +0000

Are you ready to take your React development skills to the next level? In this comprehensive guide, we'll delve into the art of building scalable React applications that not only perform flawlessly but also remain maintainable and robust in the face of evolving requirements.

Part 1: Lay the Foundation

In the first part of our journey, we laid down the groundwork for building scalable React apps. We explored the fundamentals of scalability, including project structure, state management best practices, and modular architecture. From organizing your codebase to efficiently managing state with Redux Toolkit and React Query, we covered it all.

Part 2: Advanced Strategies Unveiled

In the second part, we dived into the advanced techniques that separate good React apps from exceptional ones. We discussed performance optimization tricks like rendering optimization, code splitting, and lazy loading to ensure lightning-fast loading times. Additionally, we explored seamless API integration using REST and GraphQL, along with data fetching libraries like Axios and React Query. Finally, we demystified CI/CD pipelines, containerization with Docker, and deployment strategies on cloud platforms like AWS, Azure, and Google Cloud.

Ready to level up your React game? Dive deeper into these concepts and unlock the full potential of your applications!

Click here to read the full blog post and become a React master

Join us on this exciting journey to mastering scalable React apps. Don't miss out on the chance to elevate your development skills and create top-notch applications that stand out in today's competitive landscape. Happy coding! 🚀

Mastering Programming: Essential Tips for Beginners to Build a Strong Foundation

Michael Osas — Thu, 16 Mar 2023 10:50:27 +0000

Programming is an essential skill in today's world, whether you're interested in web development, mobile app development, data analysis, or any other field that requires coding. However, getting started can be intimidating, especially if you're new to the world of programming. In this blog post, we'll explore some tips to help you get started with programming.

Choose a programming language:

There are many programming languages to choose from, and each language has its own strengths and weaknesses. Python is a popular language for beginners, due to its ease of use and readability. Java is a widely-used language in the enterprise world, while JavaScript is commonly used for web development. C++ is a powerful language often used for systems programming and game development. When choosing a language, it's important to consider your goals and interests, as well as the demands of the job market.

Learn the basics:

Once you've chosen a language, it's time to start learning the basics. This includes understanding data types, control structures, functions, and other fundamental concepts. Many online resources are available to help you get started, including tutorials, courses, and books. It's important to take your time with the basics and practice as much as possible to ensure that you have a strong foundation.

Practice:

The key to becoming a good programmer is practice. Start by writing simple programs and gradually increase the complexity of your projects as you gain more experience. Don't be afraid to make mistakes; learning from your errors is an important part of the learning process. It's also important to get feedback from others, whether it's through online communities or by working with a mentor.

Join online communities:

Online communities are a great way to connect with other programmers and learn from their experiences. This can include forums, social media groups, and open-source projects. By participating in these communities, you can stay up-to-date with the latest programming trends and technologies, and connect with potential mentors or collaborators.

Build a portfolio:

As you gain experience, it's important to build a portfolio of your projects to showcase your skills to potential employers. This can include personal projects, open-source contributions, and work you have done for clients. Your portfolio should demonstrate your ability to solve problems, write clean code, and work collaboratively.

Consider getting a degree or certification:

While a degree or certification is not necessary to become a programmer, it can help you stand out from the competition and increase your chances of getting hired. Many universities offer degree programs in computer science or related fields, while online courses and bootcamps can provide certifications in specific programming languages or technologies.

In conclusion, learning to program can be a challenging but rewarding experience. By choosing a language, learning the basics, practicing, joining online communities, building a portfolio, and considering getting a degree or certification, you can develop the skills you need to become a successful programmer. Remember, programming is a continuous learning process, so never stop learning and exploring new technologies and techniques. Good luck on your programming journey!

Understanding React Hooks: How to Use useRef, useMemo, and useCallback for More Efficient Code

Michael Osas — Wed, 22 Feb 2023 21:03:57 +0000

React Hooks are a feature in React that allows developers to use state and other React features without needing to write a class component. They have revolutionized the way developers write React components, making them more reusable and maintainable. These hooks provide a simpler way to use state and other React features, without requiring a class component. This post explores the details of three built-in hooks in React: useRef, useMemo, and useCallback. They make it easier to reuse the same stateful logic across different components, which makes code more maintainable and easier to understand.

It took me the whole day to come up with this detailed explanation of these hooks, so get ready to take breaks while reading this post... 👍🏼

There are different built-in hooks in React, such as useState, useEffect, useRef, useMemo, and useCallback. These hooks are functions that can be used inside functional components to manage state, perform actions, and access context.

useRef is a hook that provides a way to store a mutable value that persists across renders. It is commonly used to access or modify the properties of DOM elements, like the value of an input or the scroll position of a container. Unlike useState, updating the value of a useRef does not trigger a re-render of the component. Instead, the value can be accessed or modified directly by using the current property of the returned object.

useMemo is a hook that memoizes the result of a function and returns a cached value unless one of the dependencies has changed. This can be useful for expensive computations or when a component's rendering depends on the value of a complex data structure. The second argument of useMemo is an array of dependencies, and the function is only re-executed when one of the dependencies changes.

useCallback is a hook that memoizes a function and returns a cached value unless one of the dependencies has changed. This can be useful for optimizing the performance of a component by avoiding unnecessary re-renders caused by passing a new function reference to child components. The second argument of useCallback is an array of dependencies, and the function is only re-created when one of the dependencies changes.

In general, React Hooks make it easier to write more reusable and maintainable code by breaking down stateful logic into smaller, composable functions. Using hooks can simplify the process of writing components, reduce repetitive code, and make it easier to understand the behavior of a component.

Alright, Let’s Take a Deeper Dive into These Hooks:

1. useRef

In React, the useRef hook is used to create a mutable reference that can persist across re-renders. It is similar to the ref attribute in class components, but with some differences.
The useRef hook takes an initial value as an argument and returns a mutable ref object with a current property. The current property can be set and accessed directly, without triggering a re-render of the component. This is useful for storing a value or a reference to a DOM element that needs to be accessed later.
Here's an example of how to use useRef to store a reference to an input element and focus it when a button is clicked:


import { useRef } from 'react';

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

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

This is a React functional component called Example that uses the useRef hook to create a reference to an input element in the component. Let's take a closer look at the code:

The useRef hook is a built-in React hook that creates a mutable reference to an element or a value that persists across component renders. In this example, the useRef hook is used to create a reference to an input element by calling useRef(null). The inputRef variable is then initialized to this reference.

The handleClick function is called when the user clicks the "Focus Input" button. The function uses the current property of the inputRef object to get a reference to the input element and then calls the focus() method to focus the input element.

The return statement of the Example component renders a <div> element that contains an input element and a button. The ref attribute of the input element is set to inputRef, which creates a reference to the input element. The onClick attribute of the button is set to handleClick, which calls the handleClick function when the button is clicked.

In summary, this example demonstrates how to use the useRef hook in a React functional component to create a reference to an input element, and then use that reference to focus the input element when a button is clicked. By using the useRef hook, the reference to the input element persists across component renders, which can be useful for accessing and modifying the input element in other parts of the component or application.

2. useMemo

useMemo is a React Hook that is used for performance optimization by memoizing the result of a computationally expensive function. Memoization is the process of caching the result of a function based on its arguments, so that if the function is called again with the same arguments, the cached result is returned instead of recomputing the result.

The useMemo Hook takes two arguments: a function that returns the memoized value, and an array of dependencies. The function is only re-executed when one of the dependencies changes. If the dependencies are the same between renders, the previously memoized value is returned
Here is a detailed example of the useMemo hook:


import React, { useMemo } from 'react';

function MyComponent({ a, b }) {
  const memoizedValue = useMemo(() => {
    // Compute the result only when a or b changes
    return a * b;
  }, [a, b]);

  return (
    <div>
      Memoized Value: {memoizedValue}
    </div>
  );
}

In the code example above, useMemo is being used to cache or remember the result of a calculation involving a and b. This means that if the values of a or b don't change between renders, the memoized value will be returned instead of re-computing it, which can improve performance by saving computation time.
However, it's important to note that using useMemo is not always necessary. If the calculation being cached is not very time-consuming or if the component re-renders frequently regardless of the memoized value, the performance benefits of using useMemo may not be significant, or it may even make the performance worse. It's also important to keep in mind that memoization is not always the best approach, especially when the value being cached is likely to change frequently. In such cases, it may be better to calculate the value directly in the render function.
Overall, useMemo is a useful tool for optimizing the performance of a React application, but it should be used thoughtfully and with an understanding of the potential benefits and tradeoffs.

3. useCallback

useCallback is a built-in React hook that is used to optimize performance by reducing unnecessary re-rendering of components. The hook memoizes a function, which means that it returns the same function instance on re-renders unless any of its dependencies change.
Here is the basic syntax of useCallback:

javascript
const memoizedCallback = useCallback(
  () => {
    // function body
  },
  [/* dependency array */]
);

It looks like the useEffect hook, the first argument of useCallback is the function that you want to memoize. The second argument is an optional array of dependencies that are used to determine whether the memoized function should be recomputed. If any of the dependencies change, the memoized function will be re-computed; otherwise, the cached function will be returned. The primary benefit of useCallback is that it helps to prevent unnecessary re-renders of child components.
Let’s take a simple application as case study:


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

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

  return (
    <div>
      <button onClick={handleClick}>Increment count</button>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  const [value, setValue] = useState(0);

  const expensiveFunction = () => {
    // do some expensive computation here
  };

  useEffect(() => {
    expensiveFunction();
  }, [expensiveFunction]);

  return <div>{value}</div>;
}

This is an example of a React functional component that consists of two components: ParentComponent and ChildComponent. Let's take a closer look at each component:

The ParentComponent: This component defines a state variable called count using the useState hook, which is initialized to zero. It also defines a click event handler function called handleClick, which increments the count state variable using the setCount function.
When the component is rendered, it returns a <div> element with a button that, when clicked, calls the handleClick function to increment the count variable. It also renders another component called ChildComponent.

The ChildComponent: This component defines a state variable called value using the useState hook, which is initialized to zero. It also defines a function called expensiveFunction, which simulates some expensive computation.
This component uses the useEffect hook to call the expensiveFunction function when the component is mounted. The useEffect hook takes two arguments: a function and a dependency array. In this case, the function is expensiveFunction, and the dependency array is [expensiveFunction]. By specifying [expensiveFunction] as a dependency array, the useEffect hook will only re-run the expensiveFunction function when the expensiveFunction reference changes.

Finally, the component returns a <div> element with the value state variable rendered inside it. This example demonstrates how to use the useState and useEffect hooks in React functional components to manage state and side effects, respectively. The ParentComponent component updates its count state variable in response to a button click, while the ChildComponent component uses the useEffect hook to run some expensive computation when the component mounts.
To optimize this code, we are going to use useCallback to memoize the expensive function and only recompute it when its dependencies change:


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

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

  const memoizedFunction = useCallback(() => {
    // do some expensive computation here
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Increment count</button>
      <ChildComponent expensiveFunction={memoizedFunction} />
    </div>
  );
}

function ChildComponent({ expensiveFunction }) {
  const [value, setValue] = useState(0);

  useEffect(() => {
    expensiveFunction();
  }, [expensiveFunction]);

  return <div>{value}</div>;
}

In this code example, the ParentComponent is similar to the previous example, except that it uses the useCallback hook to define a memoized function called memoizedFunction. The useCallback hook is used to memoize a function so that it doesn't get recreated on every render. This can be useful when passing a function as a prop to a child component, as it can prevent unnecessary re-renders. When the component is rendered, it returns a <div> element with a button that, when clicked, calls the handleClick function to increment the count variable. It also renders another component called ChildComponent and passes the memoizedFunction as a prop.

The ChildComponent is also similar to the previous example, except that it receives a prop called expensiveFunction and uses it to run the expensive computation using the useEffect hook. Since the expensiveFunction is passed as a prop, it is also passed down from the ParentComponent, which memoizes the function using the useCallback hook. In this case, the useEffect hook is set up to run the expensive Function when the component is mounted or when the expensive Function reference changes. By memoizing the function in the ParentComponent, the expensive Function reference will not change on every render, which can prevent unnecessary re-renders of the ChildComponent.

Finally, the component returns a <div> element with the value state variable rendered inside it.

To put it simply, this example shows how to use a technique called useCallback in React functional components to make sure that a function is not re-run unnecessarily. It also shows how to use a function that has been optimized in this way as a prop to a child component and how to run a time-consuming task using the useEffect technique.

My final thoughts

In conclusion, React Hooks provide developers with an easier way to write and manage stateful logic in functional components.
The useRef hook creates a mutable reference to an element or a value that persists across renders, allowing for direct access and modification without re-rendering the component. The useMemo hook is used for performance optimization by caching the result of a computationally expensive function, only re-executing the function when the dependencies have changed. The useCallback hook is useful for optimizing the performance of a component by memoizing a function and returning a cached value unless one of the dependencies has changed.
With built-in hooks such as useRef, useMemo, and useCallback, developers can manage state, perform actions, and access context more efficiently. By breaking down stateful logic into smaller, composable functions, hooks make it simpler to write components, reduce repetitive code, and make component behavior easier to understand. The useRef hook can create a mutable reference to an element or value that persists across component renders. The useMemo hook can optimize performance by memoizing the result of a computationally expensive function, and the useCallback hook can memoize a function to optimize the performance of a component. Overall, using React Hooks is a great way to make code more reusable and maintainable.

Thank you for reading...

I hope you found this little article helpful. Please share it with your friends and colleagues. Connect with me on my socials to read more about JavaScript, React, Node.js, and more…!

Using the Local Storage API in React: Creating a custom hook component

Michael Osas — Sun, 19 Feb 2023 10:23:42 +0000

As you browse the web, you might have noticed that some websites remember your preferences or settings even after you close your browser or turn off your device. This is possible because of the localStorage API, a feature of web browsers that allows developers to store data in a user's browser.

What is localStorage API?

In simple terms, it's a way for web developers to store information on a user's browser that's specific to a particular website or web application. It's like a digital notebook that remembers your preferences, settings, and other types of data that you want to keep for future reference.

Once data is stored using the localStorage API, it stays there until it's explicitly removed. This means that even if you close your browser, shut down your device, or come back to the website at a later time, the data will still be there. For example, if you're shopping online and add items to your cart, the website can use the localStorage API to remember the items even if you navigate away from the page or close your browser.

The localStorage API is part of the Web Storage API specification, which also includes the sessionStorage API. The difference between the two is that localStorage is designed to store data indefinitely, while sessionStorage only stores data for the duration of a single browsing session. So, if you close your browser or navigate away from the website, the data stored in sessionStorage will be lost.

Why local storage should be used in your project?

local storage can be a useful tool for improving the functionality, performance, and security of your web application, as well as enhancing the user experience. Here are some reasons why you might want to use local storage in your project:

1. Offline Functionality: Local storage can be used to store data locally on the user's device, which allows the application to work even when the user is offline.

2. Performance Improvement: By storing data locally, the application can reduce the number of network requests needed, resulting in a faster and more responsive application.

3. User Experience: Local storage can be used to remember user preferences or settings, such as language selection, preferred theme, or other customizations, which can improve the overall user experience.

4. Security: Unlike cookies, which can be accessed by both the client and the server, data stored in local storage is only accessible by the client, making it a more secure option for storing sensitive data.

5. Scalability: Local storage can handle large amounts of data, and it is relatively easy to use and implement, making it a scalable solution for storing application data.

How to make a localStorage hook component?

To use the localStorage API, web developers can write JavaScript code that calls methods like setItem, getItem, removeItem, and clear. These methods are used to add, retrieve, delete, and clear data from the localStorage object. However, it's important to note that localStorage is limited by the amount of storage space available in the user's browser, which is typically around 5-10 MB.

Create a react component useLocalStorage.jsx

To create a custom hook wrapper component, we'll need to create a component with the file name "useLocalStorage". Here's the complete code for the custom hook, which we'll go through step by step to explain what each function does.

import { useState } from 'react';

export default function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  const removeValue = () => {
    try {
      setStoredValue(null);
      window.localStorage.removeItem(key);
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue, removeValue];
}

```


 The provided code demonstrates a useful approach for persisting data within a React application using the `localStorage` API. Specifically, the code defines a custom hook called `useLocalStorage` which takes in a key (to identify the value in `localStorage`) and an initial value. This hook returns an array containing the current value and a function to update it.

The hook takes two parameters: key, which is a string that identifies the data being stored, and initialValue, which is the default value for the data in case it is not yet present in the localStorage.

The useState hook is used to define the storedValue state variable, which is initialized with the value of the key in localStorage if it exists, or with the initialValue if it does not. The hook also defines the setStoredValue function, which is used to update the value of storedValue in both the component's state and the localStorage.

The `setValue` function is defined as a wrapper around `setStoredValue`, with additional logic that handles updating the `localStorage`. If the value passed to `setValue` is a function, it is called with the current value of `storedValue` as its argument. Otherwise, the value is used directly. The `valueToStore` variable is then set to the result of the function call or the value itself. The new value of `storedValue` is set with `setStoredValue`, and the `valueToStore` is stored in the `localStorage`.

The `removeValue` function is defined to remove the value from the `localStorage`. It sets the value of `storedValue` to null and removes the item from the `localStorage`.

Finally, the hook returns an array of `[storedValue, setValue, removeValue]`, which can be used to access and manipulate the stored value. The first element of the array is the current value of `storedValue`, the second element is the `setValue` function, and the third element is the `removeValue` function. This allows the component to get, set, and remove the data from `localStorage` using a simple and standardized interface.


Create another component named RandomComponent (name it whatever you want), this component will use the custom hook we just created



````Javascript

import useLocalStorage from "./useLocalStorage";

export default function RandomComponent() {
  const [count, setCount, clearCount] = useLocalStorage("coun", 0);

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

  const decrementCount = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}
```
{% endraw %}

This is a React component called {% raw %}`RandomComponent`{% endraw %} that uses a custom hook called {% raw %}`useLocalStorage`{% endraw %} to store and retrieve a count value in the browser's {% raw %}`localStorage`. The `useLocalStorage` hook takes in two arguments, the key "count" and the default value 0, and returns an array with three elements: the current count value, a function to update the count value and store it in `localStorage`, and a function to remove the count value from `localStorage`.

In the component's return statement, the current count value is displayed along with two buttons that call the {% raw %}`incrementCount`{% endraw %} and {% raw %}`decrementCount`{% endraw %} functions when clicked. These functions use the {% raw %}`setCount`{% endraw %} function returned from the {% raw %}`useLocalStorage`{% endraw %} hook to update the value of count and store it in {% raw %}`localStorage`{% endraw %}. The component retrieves the count value from {% raw %}`localStorage`{% endraw %} when it mounts or updates, ensuring that the count value is persisted across page refreshes and navigations.



**My final thoughts...**

The localStorage API is a useful tool for web developers who want to create personalized user experiences and store data locally in a user's browser. By using this feature, websites can remember your preferences, settings, and other types of data, making your browsing experience more convenient and enjoyable.

The Basics of React.js

Michael Osas — Wed, 15 Feb 2023 15:23:41 +0000

Liquid syntax error: 'raw' tag was never closed