Forem: CCarlson249

Optimizing your React Project

CCarlson249 — Thu, 13 Apr 2023 23:19:40 +0000

As someone still learning web development, learning how to optimize my react projects is a little unnecessary considering how many users my applications have. However, I wanted to deep dive into what the next steps are for building faster and more efficient projects. My research has introduced me to many different ways to optimize my work in react. In this post I will cover several different methods for streamlining react applications.

Profiling and measuring performance
Before diving into optimization techniques, it's crucial to identify performance bottlenecks in your application. React DevTools is a browser extension that allows you to profile your application's performance, visualize component hierarchy, and examine component state and props. By profiling your application with React DevTools, you can pinpoint areas that need improvement and track the impact of optimizations.

Minimizing re-renders with memoization
One of the most effective ways to improve the performance of a React application is to minimize unnecessary component re-renders. Memoization is a technique that involves caching the results of expensive function calls to avoid recomputation. React provides two built-in methods to memoize components: React.memo() for functional components and PureComponent for class components. By wrapping your components with React.memo() or extending PureComponent, you ensure that they only re-render when their props or state have changed.

Debouncing and throttling user input
User input, such as typing in a search box or interacting with a slider, can trigger a large number of component updates, leading to reduced performance. To mitigate this, you can use debouncing and throttling techniques. Debouncing delays the execution of a function until a specified interval has elapsed since the last time it was invoked, while throttling limits the execution rate of a function. Libraries like Lodash or custom hooks can help implement these techniques, ensuring that your application remains performant even during intense user interaction.

Virtualization and lazy loading
Rendering large lists or tables can significantly impact your application's performance. Virtualization is a technique that involves rendering only the visible portion of a large dataset, reducing the number of DOM elements created and improving performance. React Virtualized and React Window are popular libraries that provide virtualization for lists and grids.

Lazy loading, on the other hand, defers the loading of resources, such as images or components, until they are needed. React.lazy() is a built-in function that enables you to load components lazily, splitting your code into smaller chunks that are loaded as required. This results in faster initial load times and improved user experience.

Optimizing state management and prop drilling
Managing state efficiently is critical for a performant React application. Overusing local component state and passing props through multiple layers of components, known as "prop drilling," can result in unnecessary re-renders and reduced performance. To avoid this, you can use global state management libraries like Redux or MobX, or take advantage of React's built-in Context API to share state among components without prop drilling.

Utilizing useMemo and useCallback hooks
React's useMemo and useCallback hooks can be used to optimize performance by memoizing expensive computations and callback functions. The useMemo hook returns a memoized value of a function, ensuring that the function is only recomputed when its dependencies change. Similarly, useCallback returns a memoized version of a callback function, preventing unnecessary re-renders caused by the creation of new callback instances. Use these hooks judiciously to avoid potential performance pitfalls.

This post does not cover all of the ways it is possible to optimize in react. I am currently gearing up to work on my fourth project here at the Flatiron program and even though my user-base is fairly small, I am excited to see if I can deploy any of these concepts in my code to push my projects that much further.

An introduction to Redux

CCarlson249 — Fri, 24 Mar 2023 02:02:06 +0000

A concept I was introduced to in the last phase of Flatiron was the one of state. It is a powerful tool for creating highly interactive and dynamic websites. However, I quickly learned that states becomes increasingly difficult to manage the larger my projects became. One such tool we were introduced to to help with state management but did not have time for was Redux. In this article I dive deeper into Redux and how it can push React's frontend development power even further.

React, a popular JavaScript library for building user interfaces, has emerged as a powerful solution for creating modular and efficient applications. However, managing state in large-scale applications can still be challenging. Enter Redux, a predictable state container that helps streamline state management in React applications.

Redux is an open-source JavaScript library that aims to simplify state management in web applications. The main idea behind Redux is to centralize application state, making it more predictable and easier to manage. Redux enforces strict rules regarding state manipulation, allowing developers to achieve better control and maintainability in their applications.

Redux works based on three core principles:

Single source of truth: Redux stores the entire application state in a single JavaScript object, called the "store." This centralized approach simplifies debugging and makes state management more predictable.

State is read-only: In Redux, state cannot be modified directly. Instead, state changes are made through actions, which are plain JavaScript objects describing the change to be made.

Pure reducer functions: Reducers are pure functions that specify how the application state should change in response to an action. Reducers take the current state and an action as arguments and return a new state without modifying the original state.

How Redux Works:

Redux operates through a unidirectional data flow, enabling better control over the state changes. The process consists of the following steps:

Action creation: Actions are plain JavaScript objects that describe the state change. They must have a 'type' property, and optionally, a payload containing additional data.

Dispatching actions: When an action is created, it is dispatched using the store's 'dispatch' method. This method sends the action to the reducer.

Reducer processing: The reducer processes the action and calculates the new state based on the action's type and payload. It returns the new state without modifying the original state.

Updating the store: The store updates its state with the new state returned by the reducer. The store then notifies subscribers of the state change.

React components update: React components subscribed to the store receive the updated state and re-render to reflect the changes.

React is an exciting but also daunting application to me. Learning React at Flatiron was showed me what was possible in frontend development at the small scale. Redux has the capability to significantly expand my horizons and present the challenge of scale. While Redux may take a backseat at the moment while I finish bootcamp, I'm excited to continue learning and growing my software development skills.

Switch and Sort

CCarlson249 — Thu, 09 Mar 2023 01:21:26 +0000

In a recent react exercise from the Flatiron school, I was required to sort some adorable pigs by either name or weight. Sorting was an entirely new concept for me, in this post, I will discuss how I used to switch method to sort some pigs.

The objective said to sort pigs based on name and weight depending on user selection. There are a few things we need to understand about sorting in Javascript beforehand. The parameters of the sort will always be two comparators. These two comparators must be pure, meaning that the comparators cannot mutate the objects being compared. The must be stable, meaning the comparator returns the same result with the same pair of input.

Additionally, as the values assigned to the comparators will be 1, 0, or -1, the comparators must be reflexive, anti-symmetric , and transitive. So if (A > B) and (B > C), then (A > C). Now on to the sort itself.

const byNameOrWeight = (hogA, hogB) => {
switch( sort ) {
    case 'name':
        if (hogA.name < hogB.name ){
            return -1
        } else {
            return 1
        }
    case 'weight':
        return hogA.weight - hogB.weight
        default:
        return 0
}
}

As seen above, the comparators are hogA and B from the array of pigs. In the first comparison inside the switch, an if statement checks whether hogB is greater (alphabetically) than hog A and if so, assigns a value of -1. This moves the hog to an earlier position in the array. Otherwise the value is 1, returning to a lower position. Using the .name key in the object allows us to utilize the hogs names as the comparators. As comparisons between the hogs are made, names will be sorted alphabetically.

In the second case, we simply return a subtraction of hogB weight from hog A. If hogA weight is negative from being less than B, it will be moved to a lower position in the array. This powerful yet simple tool allows us to sort arrays of objects across a vast number of criteria. Hopefully in my coding career, pigs will just be the beginning.

A first foray into POST/PATCH

CCarlson249 — Fri, 10 Feb 2023 05:15:33 +0000

In the initial weeks of my Frontend education, I moved from playing around with random functions arrays to the three pillars of web development. This is where the learning curve began to steepen and the excitement to build.

The three pillars of web development are manipulating the DOM, Javascript events and communicating with the server. In this post I'll be focusing on server communication.

One of the more abstract concepts in web development, this is where you begin to have to acknowledge where on earth the data for your website is going to come from, as well as how and when your code is executed to maximize efficiency and reduce bugs.

The project that developed my understanding the most so far has been lab cutely called "Toy-Tales." Its a static page for displaying, uploading, and liking Andy's favorite toys from "Toy Story." This nostalgic background did little to lessen the headache this project gave me when I first started.

As you tell by the title the focus of my struggles were on the POST and PATCH functionalities of this site. My POST is meant to allow the user to upload new toys to the site. As seen below, the crux of my post functionality is divided between two functions.
›

I built the submission event as the bridge between my Event-listener and the POST request. Its main job is to hold the constant that interprets the information gathered from the submit form event. This gets sent my render function that handles.... several things.

Something I learned before and after this assignment was to keep your functions to on the smaller side, preferably with singular task. This was lesson was hard learned as this function is difficult to look at. The first part of the function appends the elements of the toy's names, images, and like counts to the DOM. Below you will notice an event listener for a like button. What was difficult at the time but so simple in hindsight was the syntax to allow the user to add multiple likes to the like counter without refreshing.

Instead of "toys.likes +1," I used "++toys.likes." This is significantly more efficient than other methods I had tried. This included assigning the amount to a new variable and even trying to refractor my initial likes.innerText (to what, I don't know). My final answer was deceptively simply, but also taught me loads on Javascript syntax.

Finally, my PATCH request required two features I wasn't yet familiar with. One being the location of the patch being toys.id, which informs where my likes need to go, and the object I stringify within the body, which allows me to keep my syntax as simple as possible. What I took away from this exercise was that refractoring doesn't mean using bigger words or more complicated structure(and to make my functions smaller).