Forem: Willian Novaes

Type Vs Interface in Typescript

Willian Novaes — Wed, 13 Nov 2024 12:41:44 +0000

Type vs. Interface in TypeScript: What's the Difference?

Hey everyone!

Lately, I've been digging deeper into TypeScript, and I thought I'd share some insights on a topic that often confuses many of us: the difference between type and interface. If you've ever wondered when to use one over the other, you're not alone!

🔍 So, what's the deal?

Both type and interface allow us to define custom types in TypeScript, but they have their own unique features and use cases. Here's a breakdown:

📝 Type Aliases (`type`)

What are they?

Think of type as a way to give a name to any type. This could be a primitive, a union, a tuple, an object, or even a function type.

Pros:

Versatility with Complex Types: Perfect for defining unions and intersections.

  type Status = "success" | "error" | "loading";

Primitives and Tuples: You can alias primitive types, tuples, and more.

  type Point = [number, number];

Advanced Type Features: Great for mapped types and conditional types.

Cons:

No Declaration Merging: Unlike interfaces, you can't reopen a type alias and add new properties later.
Less OOP-Friendly: Types can't be implemented by classes or extended in the same way interfaces can.

📐 Interfaces (`interface`)

What are they?

Interfaces are primarily used to describe the shape of objects, including their properties and methods.

Pros:

Extensibility: You can extend interfaces or even merge them. This is super handy for large codebases.

  interface User {
    name: string;
  }

  interface User {
    age: number;
  }
  // User now has both name and age properties

Class Implementation: Ideal for object-oriented patterns. Classes can implement interfaces.

  interface Drivable {
    drive(): void;
  }

  class Car implements Drivable {
    drive() {
      // implementation
    }
  }

Cons:

No Union Types: Interfaces can't define union types directly.
Limited with Primitives and Tuples: Not suitable for aliasing these types.

🤔 So, which one should you use?

Use type when:

Defining complex types like unions and intersections.
Working with primitives, tuples, or function types.
You need advanced type manipulation.

Use interface when:

Defining the shape of an object or class.
You might need to extend or merge types later on.
Following object-oriented design patterns.

💡 My Two Cents

Personally, I lean towards using interface for defining objects and classes because I appreciate the extensibility. For everything else, especially when dealing with unions or more complex types, type is my go-to.

But that's just me! What's your experience? Do you have a preference between type and interface in TypeScript? I'd love to hear your thoughts and any tips you might have.

Feel free to share in the comments below! 👇

Stop Using useState for everything!

Willian Novaes — Mon, 21 Oct 2024 12:59:33 +0000

When we learn React hooks, the first one we encounter is useState, and we’re amazed by how it updates our components and reflects the values. However, we can get lazy and start using it for everything. Over time, this can lead to performance loss and make our project heavier, often without us knowing why. Let's look at an example of a simple login page.

Every time we type a value into an input, we end up re-rendering the entire component unnecessarily. Unless we actually need to validate the inputs with every user input, there’s no need to track the value at every moment. We can capture the value and even validate it only when the user presses the submit button.

So, what can we do instead of using useState? Use useRef!

Instead of using useState, which triggers re-renders, we can use useRef to tie a reference to each input. Then, when the user submits the form, we can retrieve the values at that moment.

Or we might not even need to use useRef if we don't want to. If our form is encapsulated within a

element, we can simply pass the event as a property during form submission, and from the event object, we can retrieve the values.

I hope you found this tip useful. Feel free to comment, share your experiences, or add to this discussion. I look forward to sharing more insights on how to develop more performant applications.

Optimizing React Performance with React.memo, useCallback, and useMemo

Willian Novaes — Mon, 23 Sep 2024 11:00:00 +0000

In the realm of React development, performance optimization is crucial for building responsive and efficient applications. One common performance pitfall is unnecessary re-renders of components, which can lead to sluggish user experiences, especially in large and complex applications. React provides several powerful tools to mitigate this issue, notably React.memo, useCallback, and useMemo. In this post, we'll delve into these tools, exploring how they work and providing real-world examples to demonstrate their effectiveness in preventing unnecessary re-renders.

Understanding Re-renders in React

Before diving into optimization techniques, it's essential to understand why re-renders happen in React:

State Changes: When a component's state changes via useState or other state management tools, React re-renders the component to reflect the updated state.
Prop Changes: If a parent component passes new props to a child component, the child re-renders to accommodate the new data.
Context Updates: Changes in context values trigger re-renders in components consuming that context.

While re-renders are fundamental to React's reactive nature, unnecessary re-renders—where components re-render without actual changes in data—can degrade performance. This is where React.memo, useCallback, and useMemo come into play.

React.memo

How `React.memo` Works

React.memo is a higher-order component (HOC) that memoizes functional components. It prevents re-rendering of a component if its props haven't changed. Essentially, it performs a shallow comparison of props, and if there's no change, React skips rendering that component.

Basic Usage

Let's start with a simple example to demonstrate how React.memo works.

Example: `UserProfile` Component

// UserProfile.jsx
import React from 'react';

const UserProfile = ({ user }) => {
  console.log('Rendering UserProfile');
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

export default React.memo(UserProfile);

// App.jsx
import React, { useState } from 'react';
import UserProfile from './UserProfile';

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

  const user = { name: 'John Doe', email: 'john@example.com' };

  return (
    <div>
      <UserProfile user={user} />
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
};

export default App;

Explanation:

Without React.memo: Every time the App component re-renders (e.g., clicking the "Count" button), the UserProfile component also re-renders, even though the user prop hasn't changed.
With React.memo: Wrapping UserProfile with React.memo ensures that it only re-renders when the user prop changes. Clicking the "Count" button increments the count without causing UserProfile to re-render, as confirmed by the absence of "Rendering UserProfile" in the console.

Demonstrating the Behavior

Initial Render:
- Console Output:
```
 Rendering UserProfile
```

After Clicking "Count" Button:

Console Output:

 // No output, UserProfile doesn't re-render

useCallback

How `useCallback` Works

useCallback is a React hook that memoizes functions, ensuring that the same function instance is returned across renders unless its dependencies change. This is particularly useful when passing callbacks to child components that are optimized with React.memo, as it prevents unnecessary re-renders due to changing function references.

Basic Usage

Let's explore useCallback with a practical example.

Example: Memoizing Callback Functions

// Button.jsx
import React from 'react';

const Button = ({ onClick, label }) => {
  console.log(`Rendering Button: ${label}`);
  return <button onClick={onClick}>{label}</button>;
};

export default React.memo(Button);

// App.jsx
import React, { useState, useCallback } from 'react';
import Button from './Button';

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

  // Without useCallback
  // const increment = () => setCount(count + 1);

  // With useCallback
  const increment = useCallback(() => setCount(prevCount => prevCount + 1), []);

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment} label="Increment" />
      <Button onClick={() => console.log('Another Action')} label="Action" />
    </div>
  );
};

export default App;

Explanation:

Without useCallback:
- If increment is defined as a regular function, a new function instance is created on every render.
- This causes the Button component to re-render each time App re-renders, even if the function's behavior hasn't changed.
With useCallback:
- increment is memoized with useCallback, ensuring the same function instance is used across renders unless dependencies change.
- As a result, the Button component wrapped with React.memo doesn't re-render unnecessarily when App re-renders for reasons unrelated to increment.

Demonstrating the Behavior

Initial Render:

Console Output:

 Rendering Button: Increment
 Rendering Button: Action

After Clicking "Increment" Button:

Console Output:

 Rendering Button: Increment
 // "Action" button doesn't re-render as its onClick is a new function

After Implementing useCallback:

Console Output:

 Rendering Button: Increment
 Rendering Button: Action
 // Subsequent clicks only re-render "Increment" button if needed

Note: In the second "Action" button, since its onClick prop is an inline anonymous function, it still causes re-renders. We'll address this in the useMemo section.

`useMemo`

How `useMemo` Works

useMemo is a React hook that memoizes expensive computations or derived data, ensuring that they are only recalculated when their dependencies change. This helps prevent unnecessary computations on every render, enhancing performance.

Basic Usage

Let's examine useMemo through a practical example.

Example: Memoizing Expensive Calculations

// ExpensiveCalculation.jsx
import React, { useMemo } from 'react';

const ExpensiveCalculation = ({ number }) => {
  console.log('Calculating...');

  const factorial = useMemo(() => {
    const computeFactorial = (n) => {
      console.log(`Computing factorial of ${n}`);
      return n <= 0 ? 1 : n * computeFactorial(n - 1);
    };
    return computeFactorial(number);
  }, [number]);

  return <div>Factorial of {number} is {factorial}</div>;
};

export default ExpensiveCalculation;

// App.jsx
import React, { useState } from 'react';
import ExpensiveCalculation from './ExpensiveCalculation';

const App = () => {
  const [number, setNumber] = useState(5);
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveCalculation number={number} />
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <button onClick={() => setNumber(number + 1)}>Increase Number</button>
    </div>
  );
};

export default App;

Explanation:

Without useMemo:
- Every time the App component re-renders (e.g., clicking the "Count" button), the ExpensiveCalculation component also re-renders and recalculates the factorial, even if the number prop hasn't changed.
With useMemo:
- The factorial computation is wrapped with useMemo, ensuring that the expensive calculation only occurs when the number prop changes.
- Clicking the "Count" button increments the count without triggering the factorial computation, as the dependency [number] hasn't changed.

Demonstrating the Behavior

Initial Render:

Console Output:

 Computing factorial of 5
 Calculating...

After Clicking "Count" Button:

Console Output:

 Calculating...
 // No "Computing factorial" log, as useMemo prevents recalculation

After Clicking "Increase Number" Button:
- Console Output:
```
 Computing factorial of 6
 Calculating...
```

Note: useMemo is particularly beneficial for heavy computations or when deriving data from props/state that would otherwise be recalculated on every render.

Putting It All Together

To fully appreciate how React.memo, useCallback, and useMemo work in harmony to optimize React applications, let's consider a comprehensive example.

Comprehensive Example: Todo List Application

Scenario:

A parent component manages a list of todos and a count of completed todos.
Each todo item is rendered through a child component.
There's an expensive computation that filters completed todos.

Implementation:

// TodoItem.jsx
import React from 'react';

const TodoItem = ({ todo, onToggle }) => {
  console.log(`Rendering TodoItem: ${todo.id}`);
  return (
    <li>
      <input 
        type="checkbox" 
        checked={todo.completed} 
        onChange={() => onToggle(todo.id)} 
      />
      {todo.text}
    </li>
  );
};

export default React.memo(TodoItem);

// CompletedCount.jsx
import React from 'react';

const CompletedCount = ({ count }) => {
  console.log('Rendering CompletedCount');
  return <div>Completed Todos: {count}</div>;
};

export default React.memo(CompletedCount);

// App.jsx
import React, { useState, useCallback, useMemo } from 'react';
import TodoItem from './TodoItem';
import CompletedCount from './CompletedCount';

const App = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build a Todo App', completed: false },
    { id: 3, text: 'Optimize Performance', completed: false },
  ]);

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

  // Memoize the toggle function
  const toggleTodo = useCallback((id) => {
    setTodos(prevTodos =>
      prevTodos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }, []);

  // Memoize the count of completed todos
  const completedCount = useMemo(() => {
    console.log('Calculating completed todos...');
    return todos.filter(todo => todo.completed).length;
  }, [todos]);

  return (
    <div>
      <h1>Todo List</h1>
      <CompletedCount count={completedCount} />
      <ul>
        {todos.map(todo => (
          <TodoItem key={todo.id} todo={todo} onToggle={toggleTodo} />
        ))}
      </ul>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
};

export default App;

Explanation:

TodoItem Component:
- Wrapped with React.memo to prevent re-rendering unless its todo or onToggle props change.
- Clicking the checkbox toggles the completed status of the todo.
CompletedCount Component:
- Wrapped with React.memo to prevent re-rendering unless the count prop changes.
- Displays the number of completed todos.
App Component:
- Manages the todos and count state.
- Uses useCallback to memoize the toggleTodo function, ensuring it maintains the same reference unless dependencies change.
- Uses useMemo to memoize the calculation of completedCount, preventing unnecessary computations when unrelated state (count) changes.

Demonstrating the Behavior:

Initial Render:

Console Output:

 Calculating completed todos...
 Rendering CompletedCount
 Rendering TodoItem: 1
 Rendering TodoItem: 2
 Rendering TodoItem: 3

After Clicking "Count" Button:

Console Output:

 Rendering CompletedCount
 // No "Calculating completed todos..." or "Rendering TodoItem" logs, as these components are memoized

After Toggling a Todo Checkbox:

Console Output:

 Calculating completed todos...
 Rendering CompletedCount
 Rendering TodoItem: [ID of toggled todo]

Benefits:

Performance Optimization: Components only re-render when necessary, reducing the rendering workload.
Efficient Computations: Expensive calculations are only performed when dependencies change.
Stable Function References: Memoized callbacks prevent unnecessary re-renders of child components relying on them.

Best Practices and Common Pitfalls

Best Practices

Use React.memo for Pure Functional Components:
- Only memoize components that render the same output for the same props.
- Avoid overusing React.memo as it introduces additional overhead for prop comparison.
Memoize Callbacks with useCallback:
- Especially important when passing callbacks to memoized child components.
- Ensure dependencies are correctly specified to prevent stale closures.
Memoize Expensive Calculations with useMemo:
- Use useMemo for computations that are resource-intensive.
- Avoid using useMemo for trivial calculations as it may add unnecessary complexity.
Combine React.memo, useCallback, and useMemo Wisely:
- These tools work best in tandem to prevent unnecessary re-renders and optimize performance.
Profile and Measure Performance:
- Use React Developer Tools and browser profiling to identify performance bottlenecks before applying optimizations.

Common Pitfalls

Incorrect Dependency Arrays:
- Omitting dependencies can lead to bugs due to stale data.
- Including unnecessary dependencies can negate the benefits of memoization.
Over-Memoization:
- Memoizing every component or function can lead to increased memory usage and complexity.
- Focus on optimizing components that are expensive to render or are rendered frequently.
Ignoring Referential Equality:
- Even with memoization, passing new object or array references can trigger re-renders.
- Use useMemo to memoize objects and arrays when passing them as props.
Misusing useCallback and useMemo:
- Using them for functions or computations that are not performance-critical can clutter the codebase.
- Evaluate the necessity based on the component's rendering behavior.

Conclusion

Performance optimization is a vital aspect of React development, ensuring applications remain responsive and efficient as they scale. By leveraging React.memo, useCallback, and useMemo, developers can effectively prevent unnecessary re-renders, optimize expensive computations, and maintain stable function references. However, it's essential to apply these tools judiciously, balancing performance gains with code complexity.

Key Takeaways:

React.memo: Prevents functional components from re-rendering unless their props change.
useCallback: Memoizes callback functions to maintain stable references across renders.
useMemo: Memoizes expensive computations or derived data, recalculating only when dependencies change.
Strategic Application: Identify performance bottlenecks and apply memoization techniques where they offer tangible benefits.
Continuous Profiling: Regularly profile and monitor your application to ensure optimizations are effective and necessary.

Thank You!

Thank you for reading this post! We know it was extensive, but sometimes it's important to revisit the use of hooks like React.memo, useCallback, and useMemo to optimize the performance of our React applications. Implementing these practices can make a significant difference in both performance and user experience. Continue exploring and honing your React skills to build ever more efficient and responsive applications!

Forem: Willian Novaes

Type Vs Interface in Typescript

🔍 So, what's the deal?

📝 Type Aliases (type)

📐 Interfaces (interface)

🤔 So, which one should you use?

💡 My Two Cents

Stop Using useState for everything!

Optimizing React Performance with React.memo, useCallback, and useMemo

Understanding Re-renders in React

React.memo

How React.memo Works

Basic Usage

Example: UserProfile Component

Demonstrating the Behavior

useCallback

How useCallback Works

Basic Usage

Example: Memoizing Callback Functions

Demonstrating the Behavior

useMemo

How useMemo Works

Basic Usage

Example: Memoizing Expensive Calculations

Demonstrating the Behavior

Putting It All Together

Comprehensive Example: Todo List Application

Scenario:

Implementation:

Best Practices and Common Pitfalls

Best Practices

Common Pitfalls

Conclusion

Thank You!

📝 Type Aliases (`type`)

📐 Interfaces (`interface`)

How `React.memo` Works

Example: `UserProfile` Component

How `useCallback` Works

`useMemo`

How `useMemo` Works