DEV Community: Valentina

Unleashing the Power of Server Components in React.js

Valentina — Sun, 30 Jul 2023 12:49:49 +0000

React.js has always been a frontrunner in the world of front-end development due to its declarative style and efficient data-updating mechanisms.

One of the more recent updates to this powerful library is the introduction of Server Components, marking another milestone in the evolution of React.

In this article, we'll explore the intriguing world of Server Components in React.js, understand their uniqueness, and delve into some compelling reasons why developers should embrace this innovative feature.

An Introduction to Server Components in React.js

React Server Components, in essence, let you create components that are rendered on the server and sent to the client as HTML. The beauty of these components lies in their ability to handle data-intensive operations on the server-side, thereby significantly reducing the data sent to the client and improving the overall performance of your application.

But what does that really mean for developers and end-users?

Imagine a feature in your application that involves some heavy data-fetching and manipulation operations. With client-side rendering, all the heavy lifting happens on the client's device, leading to slower load times and higher data usage. But when you use a Server Component to manage this feature, all the intensive computations are done on the server, which translates to less JavaScript being shipped to the client, faster load times, and smoother user experience.

Harnessing the Power of Server Components

Understanding how to leverage Server Components requires an appreciation for their unique characteristics. Here are some examples.

An Intense News Aggregator - Using Server Components

Let's assume you're building a news aggregator that fetches a large number of articles from various sources. Rather than having the client's device handle the fetching, parsing, and displaying of this data, you could use Server Components.

import { db } from './db.server';

function NewsFeed() {
  const articles = db.query('SELECT * FROM articles LIMIT 100');

  return (
    <>
      {articles.map((article) => (
        <Article key={article.id} article={article} />
      ))}
    </>
  );
}

In this example, the NewsFeed Server Component fetches and renders the articles on the server. By doing this, we avoid sending a large amount of JavaScript to the client, making the app more performant.

A Real Estate Platform - Server Components with Zero Client-side JS

Imagine you're developing a real estate platform that includes property listings with images, descriptions, and other details. The server can handle fetching and rendering these details, drastically reducing the amount of client-side JavaScript required.

import { db } from './db.server';

function PropertyDetails({ id }) {
  const property = db.query('SELECT * FROM properties WHERE id = ?', [id]);

  return (
    <div>
      <h2>{property.title}</h2>
      <p>{property.description}</p>
      <img src={property.image} alt={property.title} />
    </div>
  );
}

In this case, PropertyDetails is a Server Component that handles the data-fetching and rendering, reducing the load on the client's device and offering an enhanced user experience.

Avoiding Pitfalls with Server Components

While Server Components offer impressive advantages, they may not be the right fit for every scenario. Here's a case where their use might not be optimal.

Misuse in Real-time Updates

Server Components are not ideal for parts of your application that need real-time updates. For instance, if you're building a chat application where the UI needs to be updated instantaneously when new messages arrive, using a Server Component for the chat interface would be counterproductive.

The server doesn't have a persistent connection to the client, so it cannot push updates. Instead, using a Client Component with a real-time data solution like WebSockets would be more suitable.

Wrapping Up

React's Server Components represent a leap forward in creating data-intensive, high-performance applications. They allow developers to offload heavy computations to the server, resulting in leaner, faster client-side experiences.

However, like any technology, they come with their own caveats. Understanding when and how to use Server Components is crucial to leverage their benefits without running into pitfalls. By effectively integrating Server Components into your React toolkit, you can take your applications to new heights of performance and efficiency.

Decoding the Magic of React’s useEffect Hook

Valentina — Sun, 30 Jul 2023 11:33:59 +0000

React has made a profound impact on how we approach front-end development, offering an elegant, declarative, and efficient way to build user interfaces.

Since the introduction of Hooks in version 16.8, the landscape has shifted significantly, and developers have been empowered with a fresh, innovative way to handle side effects in functional components.

One hook that has become indispensable is the useEffect hook.

However, its true potential is often misunderstood or underutilized.

In this article, we will reveal the magic behind useEffect, discover less-known facets of its behavior, and learn when, why, and how to use it most effectively.

The Unveiling of useEffect

The useEffect hook is designed to handle side effects in functional components, allowing us to perform actions in response to component lifecycle events like mounting, updating, and unmounting.

It takes two arguments: a function where you can place your side-effect logic and a dependency array. The function runs after the render, and it runs again if any dependencies in the dependency array change.

Mastering the Art of Using useEffect

Understanding the basics is good, but we'll now explore some more advanced concepts and situations where useEffect can be a real game-changer.

A Chat App - Using useEffect for Subscriptions

Let's say you're building a chat application, where users need to subscribe to a chat room when they enter and unsubscribe when they leave. Using class components, this logic would be split across different lifecycle methods. However, with useEffect, we can have all the related logic in one place.

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

function ChatRoom({ chatRoomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    function handleNewMessage(newMessage) {
      setMessages(prevMessages => [...prevMessages, newMessage]);
    }

    subscribeToChatRoom(chatRoomId, handleNewMessage);

    return () => {
      unsubscribeFromChatRoom(chatRoomId, handleNewMessage);
    };
  }, [chatRoomId]);

  // ...
}

In this scenario, when the chatRoomId changes, useEffect cleans up by running the return function, unsubscribing from the old chat room. It then runs the effect again, subscribing to the new chat room.

Performance Monitoring - Using useEffect for Tracking

Imagine that you want to track user behavior in your app, such as how long users spend on a specific page. useEffect allows us to implement this in a clean and efficient way:

import React, { useEffect } from 'react';

function ProductPage({ productId }) {
  useEffect(() => {
    const startTime = Date.now();

    return () => {
      const endTime = Date.now();
      const duration = endTime - startTime;
      trackUserBehavior('productPageViewDuration', duration);
    };
  }, [productId]);

  // ...
}

When the component mounts, it captures the current time. And when the component unmounts, it calculates the duration of the user's visit and logs it.

When Not to Use useEffect

Just as with any other tool, misuse or overuse of useEffect can lead to performance issues and difficult-to-track bugs.

Overdoing Dependency Arrays

Remember, each time a dependency changes, useEffect runs the cleanup function (if provided) and then the effect function. If you include items that change too frequently or unnecessarily in the dependency array, you could cause unnecessary work and potential performance degradation. Always ensure you only include necessary dependencies.

Ignoring Cleanup

When using useEffect for subscriptions, event listeners, or other side effects that require cleanup, ignoring or forgetting the cleanup function can lead to memory leaks and unexpected behavior. Always ensure to provide a cleanup function where necessary.

Conclusion

Understanding useEffect is fundamental to mastering React Hooks. This hook allows us to encapsulate side-effect logic within our functional components, leading to more readable and maintainable code.

However, careful usage is necessary to prevent unnecessary re-renders and other potential performance issues. By truly understanding and effectively using useEffect, we can build highly efficient and resilient React applications that are easier to reason about and maintain.

Understanding the Differences Between useCallback and useMemo

Valentina — Wed, 26 Jul 2023 19:34:07 +0000

React has revolutionized the way we build interfaces with its innovative and dynamic approach.

Ever since version 16.8 rolled out, Hooks have become a game-changer, enabling developers to work with state and other React features without the need for classes.

Among these Hooks, two stand out for their significance: useCallback and useMemo.

In this article, we'll take a deep dive into these hooks, understand their differences, and learn when, why, and how they should (or should not) be used.

A Brief Introduction to useCallback and useMemo

The useCallback hook returns a memoized version of the callback function that only changes if one of the dependencies has changed. It's useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

The useMemo hook returns a memoized value. Like useCallback, it only re-calculates the memoized value when one of the dependencies has changed. It's great for expensive calculations.

When and How to Use useCallback and useMemo

Now that we have a brief understanding, let's jump into some practical examples.

An Intricate Game Scenario - Using useCallback

Imagine we're creating an intricate game application where a player can increase their level by collecting gems. Every time they level up, they get a celebratory message. Here's a simplified version of that.

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

function Game() {
  const [level, setLevel] = useState(1);

  const levelUp = () => {
    setLevel(level + 1);
  };

  return <Board level={level} onLevelUp={levelUp} />;
}

function Board({ level, onLevelUp }) {
  // A heavy computation function that renders the game board
  renderBoard(level);

  return (
    <div>
      <h2>Current Level: {level}</h2>
      <button onClick={onLevelUp}>Collect a gem</button>
    </div>
  );
}

Now, the issue here is that the levelUp function is created each time Game renders. Thus, Board re-renders every time, even when there are no level changes. This might slow down our app, especially with complex board rendering. Here's where useCallback shines:

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

function Game() {
  const [level, setLevel] = useState(1);

  const levelUp = useCallback(() => {
    setLevel(level + 1);
  }, [level]);

  return <Board level={level} onLevelUp={levelUp} />;
}

With this change, a memoized levelUp function is passed to Board unless the level changes. The expensive board rendering process only happens when necessary, improving performance.

An E-Commerce Filter - Using useMemo

Suppose you're building an e-commerce app with a product listing page. There's a filter feature that allows users to search for products by their names. Here's a basic setup:

import React, { useState } from 'react';

function ProductList({ products }) {
  const [filter, setFilter] = useState('');

  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <>
      <input
        type="text"
        value={filter}
        onChange={e => setFilter(e.target.value)}
      />
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </>
  );
}

The issue is, the filter function runs each time ProductList renders. If you have thousands of products, this could slow down your app significantly. The useMemo hook can solve this problem:

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

function ProductList({ products }) {
  const [filter, setFilter] = useState('');

  const filteredProducts = useMemo(() => 
    products.filter(product =>
      product.name.toLowerCase().includes(filter.toLowerCase())
    ), [products, filter]);

  return (
    // ...
  );
}

Now, the expensive filter function only runs when products or filter changes, leading to much better performance for your product list.

When Not to Use useCallback and useMemo

While useCallback and useMemo can provide performance boosts in specific scenarios, they should not be used everywhere. Here's why.

Overuse of useCallback

Using useCallback unnecessarily can lead to more harm than good. It creates an overhead of maintaining the memoized version of the function, which can be more expensive than the function invocation itself. Let's consider an example:

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

function Greeting() {
  const [name, setName] = useState('');

  const updateName = useCallback((event) => {
    setName(event.target.value);
  }, []);

  return (
    <input
      type="text"
      value={name}
      onChange={updateName}
    />
  );
}

In this example, useCallback is not needed, because the updateName function is not computationally expensive or passed as a prop causing unnecessary re-renders. Removing useCallback from this code simplifies it without any performance downside.

Misuse of useMemo

useMemo can also be overused or misused. If the calculation isn't computationally expensive, then useMemo might bring more overhead than benefits. For example:

import React, { useMemo } from 'react';

function TotalPrice({ quantity, price }) {
  const totalPrice = useMemo(() => quantity * price, [quantity, price]);

  return (
    <h2>Total Price: {totalPrice}</h2>
  );
}

In this case, useMemo is unnecessary since the multiplication operation isn't expensive. It would be better to simply calculate totalPrice without memoization:

import React from 'react';

function TotalPrice({ quantity, price }) {
  const totalPrice = quantity * price;

  return (
    <h2>Total Price: {totalPrice}</h2>
  );
}

Conclusion

useCallback and useMemo are powerful tools in the React developer's toolkit. They are designed to help optimize React apps by preventing unnecessary renders and computations.

However, like many powerful tools, they can lead to issues when used inappropriately or excessively. By understanding the use cases for these hooks and using them judiciously, we can create more performant and maintainable React applications.

Let's Make Arrays Dance: 4 Approaches to Rotate an Array in JavaScript

Valentina — Wed, 19 Jul 2023 11:59:37 +0000

Let's Make Arrays Dance: 4 Approaches to Rotate an Array in JavaScript

One frequently encountered task in programming interviews and problem-solving is the rotation of an array. The versatility of JavaScript as a language presents us with many intriguing ways to go about this. Let's navigate through these various approaches.

1. The Straightforward Shuffle Using Splice and Concat

As you venture into the realm of JavaScript, one simple and straightforward way to address this task awaits you: using the splice() and concat() methods. It's undeniably effective!

Here's how it looks:

function rotateArray(array, steps) {
    return array.concat(array.splice(0, steps));
}

Let's dissect how this works:

The splice() method extracts the initial elements of our array, the number of which is determined by our variable steps. These elements are removed from the original array.
The concat() method appends the extracted elements to the end of the remaining elements in the array.

And just like that, we have our rotated array! 😉

Word of caution: This method is suitable when you are explicitly permitted to use built-in JavaScript functions. If this isn't the case, stick around for the other techniques we're about to discuss.

2. The Classic Spin: Looping through the Array

To flex your core JavaScript knowledge during an interview, you might want to lean on the traditional for loop.

How about spicing it up a little with ES6 syntax? Sounds good, right?

function rotateArray(array, steps) {
    let result = [...array];
    for(let i = 0; i < steps; i++){
        result.push(result.shift());
    }
    return result;
}

The modern for loop syntax introduced by ES6 is both user-friendly and less error-prone. Plus, it just looks so sleek! 👌

3. The Trendy Twist: Array Destructuring

ES6 brought another nifty feature into JavaScript: array destructuring, and it fits perfectly into our current narrative.

This approach is akin to the first method we discussed, but with a modern twist. Here's how it goes:

function rotateArray(array, steps) {
    let newArray = [...array];
    let shiftArray = newArray.splice(0, steps);
    return [...newArray, ...shiftArray];
}

Cool, right? 😎

The splice() method extracts the elements from our original array. The spread operator ... is then used to destructure these elements and concatenate them with the remaining elements in the array.

4. And Finally... The Recursive Rotation!

The last method I'm excited to share is a recursive approach to our array rotation problem.

This technique uses the function to call itself recursively until we reach our base case, which in this instance is when the steps variable reaches zero.

We can even use the ternary operator to make our JavaScript syntax more concise and clean.

function rotateArray(array, steps) {
    return steps === 0 ? array : rotateArray(array.slice(1).concat(array[0]), steps-1);
}

And that concludes our dance with array rotation using JavaScript! 🎉

I sincerely hope you found this tutorial insightful. Do share your thoughts and your own unique solutions too!

Design Principles & why they matter (a lot)

Valentina — Tue, 01 Jun 2021 11:48:19 +0000

Design Principles are one of those key ingredients that shape the actual perceived usability & vision of a certain product under the hood, and that at a first glance could almost appear as the output of a bunch of meaningless marketing jargon but whose real purpose goes so far beyond that.

I was initially able to reflect on the understated importance of Design Principles during my internship with Mailchimp in Atlanta about two years ago, which marked a significant point in my career as a Front-End Engineer.

As a matter of fact, being able to see how such an established company thinks about its product & the Design aspect connect to it is absolutely fascinating, and I gotta say that I truly learned a lot from that experience.

Design Principles encompass the whole philosophy that defines & surrounds a certain product, they act as a framework for decision making, they become collaborative tools to bridge the communication gaps with other teams & stakeholders, and ultimately shape the whole look & feel of the product with their values.

They also help to establish a common vocabulary across different teams/squads, which can serve as a helpful tool during internal product meetings.

A great example of Design Principles

Let's take a nice example of great design principles and analyse them, so to better understand their intrinsic purpose and value.

Spotify is one of those companies that deeply care about building amazing UX for their end-users, and their guiding principles are:

Content First
Be Alive
Get Familiar
Do Less
Stay Authentic
Lagom

These principles are so specific and precise in their intent, and they clearly communicate what Spotify values in a User Experience.

They tell a lot about the way Spotify thinks about product, how they want to present content, personalisation, not over-engineering and being very intentional about what they’re putting forward.

The last principle "Lagom" is actually a cool Swedish word for "just enough", which is like a common way of life to indicate the need for the perfect balance when it comes to things.

If we were to point out what makes for great Design Principles we could confidently borrow Alla Kholmatova's principles as an interesting starting point (they're included in her book "Design Systems. A Practical Guide To Creating Design Languages for Digital Products").

Great Design Principles

They're specific.
They're actionable.
They're impressionable.
They have a point of view.
They're living.

Specificity is probably the most important aspect to keep in mind among those 5 principles when it comes to conceptualising new Design Principles, as having a clear picture in your mind about what the brand wants to convey to its end-users and preserving the unicity of the core values is vital.

Actionable refers to the fact that new Design Principles need to be concrete and practical in their intent so that you can effectively act upon them to make a real impact.

Impressionable because a design principle needs to have a soul, a well-defined motif that gets stuck in your head whenever you think about it.

They have a point of view because of course they need to be opinionated somehow, otherwise they wouldn't be able to properly reflect the brand values and would defeat their own effective purpose.

They're living because they need to be flexible enough in order to accommodate any new tension points and discoveries related to the brand. They have the capacity to evolve over time and renew themselves.

What about you? Have you ever taken part in the brainstorming process for new Design Principles in your company? How did you decide what was important in shaping those principles?

Please feel free to share your experience & thoughts about this topic down in the comments!

4 different ways to reverse a string with JavaScript

Valentina — Thu, 11 Jun 2020 18:52:24 +0000

Reversing a string is perhaps one of the most common interview questions one of those which inevitably we, as Software Developers, encounter during our journeys.

When it comes to JavaScript and its many quirkinesses, one might feel overwhelmed by the many possible ways to go about tackling this particular problem, and here I would like to show you a few viable approaches.

1. The quick & dirty way using built-in methods

This is probably the most common and dirty way to approach this problem with JavaScript…but it does the job!

Let’s briefly recap how this approach actually works.

The split() method splits our String object, so that every single character in the original String array is now separated in its own single-character substring.
The reverse() method comes then into play and does the main job: it simply reverses the elements contained in the originally array so that what originally was the last character in the -String array, is now the first element (in our case it’s a “.” , since it’s the character that our variable “stringToReverse” was ending on).
The join() method finally rejoins all the single characters previously separated by the split() method to form and recompose our reversed string.

Et voilà! 😏

Quick side note : This approach should preferably be used if your interviewer specifically says that you are allowed to use built-in methods, otherwise you should go for the next approaches I am going to show you.

2. The Old Fashioned Way: the for loop

If you wanna show your interviewer that you know how to solve this problem without relying on the JS built-in methods, just use the for loop.

But let’s just get a bit fancier and use the ES6 syntax, shall we?

The new for loop syntax introduced by ES6 is very handy and it drastically reduces the chance of making mistakes while typing code for the loop.
Also, it is much cleaner and nicer to look at 👌 .

3. The Concise and even more “ES6” way of doing things with the Spread Syntax

With ES6 we have a new way of splitting our String into an array, thanks to the so-called spread operator […].

This approach is almost identical to the first approach I showed (except for the […] operator of course 😅 ) and here below you can have a look at it.

Pretty neat, huh? 😎

Passing the “stringToReverse” as a parameter of the spread operator allows us to “spread” the single character values contained in our original array to get the same result as we did using the split() function, so that we can later reverse the all the single characters one by one as we did before with the JS built-in method reverse() and then finish off once more with the join() method.

4. Last But Not Least….Recursion!

The last method I would like to show you is the recursive approach to this problem.

In this case we want to set up our function so that it recursively calls itself till it hits our base case (i.e. an empty string).

We simply cut the first character of our string object away with the substr() method, and add it at the end of the string recursively till there are no more characters left to add.

We can even do this with a ternary operator to be more concise and clean with our JS syntax.

And that was the last example on how to reverse a string with JavaScript! 🎉

I truly hope you enjoyed this tutorial and please let me know your thoughts and solutions too!