Forem: Ashwan Lal

React Enterprise Design Patterns

Ashwan Lal — Wed, 31 Jan 2024 15:53:00 +0000

React is a powerful JavaScript library for building user interfaces. Its component-based architecture and ability to build reusable components have made it the go-to choice for many enterprise-level applications. However, as the application grows in size and complexity, it becomes more challenging to maintain and scale. This is where design patterns come into play. In this blog post, we will explore some of the most commonly used React enterprise design patterns, along with code examples in TypeScript.

Container and Presentational Components Pattern

One of the most widely used patterns in React is the Container and Presentational Components pattern. This pattern separates the presentation logic from the business logic, making the code more modular and easier to test. The container component is responsible for fetching data from the server and passing it down to the presentational component as props. The presentational component is responsible for rendering the UI.

// Container Component
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from './userActions';
import { RootState } from './rootReducer';
import UserList from './UserList';

const UserListContainer: React.FC = () => {
  const dispatch = useDispatch();
  const { loading, users } = useSelector((state: RootState) => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

  return <UserList loading={loading} users={users} />;
};

export default UserListContainer;

// Presentational Component
import React from 'react';
import { User } from './userTypes';

interface Props {
  loading: boolean;
  users: User[];
}

const UserList: React.FC<Props> = ({ loading, users }) => {
  if (loading) return <div>Loading...</div>;
  if (!users) return null;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

Render Props Pattern

The Render Props pattern is a technique for sharing code between components using a prop whose value is a function. This pattern is useful when you have components that share similar functionality but have different rendering requirements.

import React from 'react';

interface Props {
  render: (count: number, increment: () => void) => JSX.Element;
}

const Counter: React.FC<Props> = ({ render }) => {
  const [count, setCount] = React.useState(0);

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

  return render(count, increment);
};

export default Counter;

// Usage
import React from 'react';
import Counter from './Counter';

const App: React.FC = () => {
  return (
    <div>
      <h1>Render Props Pattern</h1>
      <Counter
        render={(count, increment) => (
          <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
          </div>
        )}
      />
    </div>
  );
};

export default App;

Higher-Order Component Pattern

The Higher-Order Component (HOC) pattern is a design pattern in React that enables component reusability and code sharing by providing a way to enhance or modify a component’s functionality.

In simple terms, an HOC is a function that takes in a component as an argument and returns a new component with additional features. The new component can then be rendered like any other component in React. The original component is wrapped by the HOC, and the HOC provides additional behavior or props to the wrapped component.

HOCs can be used for a wide range of tasks, such as providing context, handling errors, fetching data, or enforcing authentication. They can help to reduce code duplication, increase code maintainability, and promote code reuse.

import React from 'react';

// Define a higher-order component
const withName = (WrappedComponent) => {
  return class extends React.Component {
    state = {
      name: 'John Doe'
    }

    render() {
      return (
        <WrappedComponent name={this.state.name} {...this.props} />
      )
    }
  }
}

// Define a regular component
const MyComponent = (props) => {
  return (
    <div>
      <p>Hello, my name is {props.name}.</p>
      <p>I am a {props.role}.</p>
    </div>
  )
}

// Wrap MyComponent with the withName HOC
const MyComponentWithName = withName(MyComponent);

// Render MyComponentWithName
const App = () => {
  return (
    <div>
      <MyComponentWithName role="developer" />
    </div>
  )
}

export default App;

Disabled prop pattern

The disabled prop pattern is a design pattern used in React that enables the creation of accessible user interfaces by providing a way to disable interactive elements such as buttons, links, and form fields when they are not available or applicable.

The pattern involves adding a disabled prop to the interactive elements in the component, which when set to true, disables the element and prevents it from receiving user input. This is especially useful for situations where the interactive element is not applicable due to a particular condition, such as an incomplete form or insufficient user permissions.

import React from 'react';

const App = () => {
  return (
    <div>
      <SomeComponent disabled />
    </div>
  );
};

const SomeComponent = ({ disabled = false }) => {
  return (
    !disabled && (
      <div>
        <h2>Disable SomeComponent to see magic happen!</h2>
      </div>
    )
  );
};

Controlled and Uncontrolled Component Patterns

A controlled component is a form element whose value is controlled by React. In other words, the value of the component is always set explicitly through props and updated through callbacks. This means that the component’s state is always in sync with the input data, allowing React to control the component’s behavior and allowing the developer to handle user input easily.

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

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

An uncontrolled component is a form element whose value is managed by the browser. In other words, the value of the component is set by the user, and React does not control its behavior. This can make it more difficult to handle user input in complex forms, but it can also be faster and easier to use in simple forms.

import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

Compound Components Pattern

The Compound Components Pattern is a design pattern used in React to manage components that are composed of multiple child components. This pattern involves separating the concerns of the parent component into smaller components, and then using a combination of props, context, and other techniques to manage the relationships between these smaller components.

The idea behind the Compound Components Pattern is to provide a way for developers to create reusable, flexible, and easy-to-use components that are composed of smaller building blocks. This allows developers to create complex UI components that can be easily customized and extended, while still maintaining a clear and easy-to-understand code structure.

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

const ToggleContext = createContext();

function Toggle({ children }) {
  const [on, setOn] = useState(false);

  const toggle = () => setOn(!on);

  return (
    <ToggleContext.Provider value={{ on, toggle }}>
      {children}
    </ToggleContext.Provider>
  );
}

function ToggleOn({ children }) {
  const { on } = useContext(ToggleContext);
  return on ? children : null;
}

function ToggleOff({ children }) {
  const { on } = useContext(ToggleContext);
  return on ? null : children;
}

function ToggleButton(props) {
  const { on, toggle } = useContext(ToggleContext);
  return <button onClick={toggle} {...props} />;
}

function App() {
  return (
    <Toggle>
      <ToggleOn>The button is on</ToggleOn>
      <ToggleOff>The button is off</ToggleOff>
      <ToggleButton>Toggle</ToggleButton>
    </Toggle>
  );
}

Prop Collections Pattern

The Prop Collections Pattern is a design pattern used in React to pass a collection of props to a component. It involves combining multiple related props into a single object, which is then passed to the component as a single prop.

This pattern is particularly useful when we want to pass a large number of related props to a component, as it allows us to reduce the clutter in our code and make it easier to manage the props.

import React from 'react';

function Button(props) {
  const { label, color, size, ...rest } = props;
  return (
    <button style={{ color, fontSize: size }} {...rest}>
      {label}
    </button>
  );
}

function App() {
  const buttonProps = {
    label: "Click Me",
    color: "red",
    size: "20px",
    onClick: () => console.log("Button clicked!")
  };
  return <Button {...buttonProps} />;
}

Function-as-Child Pattern

The Function-as-Child pattern is a design pattern used in React that involves passing a function as a child to a component, which is then called inside the component to render the actual content.

import React from 'react';

function Toggle(props) {
  const [on, setOn] = useState(false);

  const handleToggle = () => {
    setOn(!on);
  };

  return props.children({
    on: on,
    toggle: handleToggle
  });
}

function App() {
  return (
    <Toggle>
      {({ on, toggle }) => (
        <div>
          {on ? "The button is on" : "The button is off"}
          <button onClick={toggle}>Toggle</button>
        </div>
      )}
    </Toggle>
  );
}

Controlled Input Pattern

The Controlled Input pattern is a pattern used in React for managing input fields. It involves storing the current value of an input field in the component state and using an event handler to update the state when the input value changes.

import React, { useState } from "react";

function ControlledInput() {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>The input value is: {inputValue}</p>
    </div>
  );
}

Immutable Pattern

The Immutable Pattern is often used to manage the state of components. Instead of modifying the state directly, we create a new state object with the updated values, which is then passed to the component to render.

The Immutable.js library can be used to create immutable data structures, which can be used for React state management. Here’s an example of how the Immutable Pattern can be used in a React component:

import React, { Component } from 'react';
import { Map } from 'immutable';

class MyComponent extends Component {
  state = {
    data: Map({
      name: 'John',
      age: 30,
      email: 'john@example.com'
    })
  };

  handleNameChange = (event) => {
    const name = event.target.value;
    const newData = this.state.data.set('name', name);
    this.setState({ data: newData });
  };

  render() {
    const { data } = this.state;
    return (
      <div>
        <label>Name:</label>
        <input type="text" value={data.get('name')} onChange={this.handleNameChange} />
        <label>Age:</label>
        <span>{data.get('age')}</span>
        <label>Email:</label>
        <span>{data.get('email')}</span>
      </div>
    );
  }
}

Conclusion

Overall, React enterprise design patterns are a valuable set of tools and techniques that can help you build better React applications, improve development productivity and efficiency, and deliver high-quality software that meets the needs of your users and stakeholders.

Resource

https://medium.com/gitconnected/react-enterprise-design-patterns-81f009fbc221

JavaScript Tips for Cleaner Code

Ashwan Lal — Sun, 31 Dec 2023 17:01:24 +0000

Some javaScript techniques that lead to clean and well-organized code.

1. Object Destructing:

Object destructuring allows you to extract data from objects into distinct variables.
This can make your code cleaner by avoiding repetitively using dot notation.

For example:

const user = {
  name: 'John',
  age: 30
};

// Without destructuring
const name = user.name; 
const age = user.age;

// With destructuring
const { name, age } = user;

2. Default Parameters:

Default parameters allow you to set default values for function parameters if none are provided.
This avoids repeating yourself by redefining values every time.

For example:

function greet(name = 'Stranger') {
  console.log('Hello ' + name);
}

greet(); // Hello Stranger
greet('John'); // Hello John

Setting default values makes functions more flexible to use.

3. Template Literals:

Template literals make string concatenation cleaner.

For example:

const name = 'John';
const age = 30;

// Without template literals
const greeting = 'Hello ' + name + ', you are ' + age; 

// With template literals 
const greeting = `Hello ${name}, you are ${age}`;

Template literals remove lots of pesky concatenation.

4. Use Array Destructuring:

Array destructuring works similarly to object destructuring, allowing you to extract array elements into variables.

For example:

const fruits = ['apples', 'oranges', 'bananas'];

// Without destructuring
const fruit1 = fruits[0];
const fruit2 = fruits[1]; 

// With destructuring
const [fruit1, fruit2] = fruits;

Much simpler! Even a young programmer could pick this up.

5. Use Array Methods:

JavaScript has handy array methods to help us write cleaner code. Things like map(), filter(), find(), reduce() etc.
can avoid lots of loops and make code more expressive.

For example:

// Filter out all even numbers
const evenNumbers = numbers.filter(num => num % 2 === 0);

// Extract names from objects
const names = users.map(user => user.name);

JavaScript's array methods are super easy to grasp.

6. Ternary Operator:

The ternary operator allows you to write one-line if/else statements in a simpler way.

For example:

// Without ternary
let message;
if(isLoggedIn) {
  message = 'Welcome back!';
} else {
  message = 'Please log in';
}

// With ternary 
const message = isLoggedIn ? 'Welcome back!' : 'Please log in';

7. Object Methods:

JavaScript gives objects built-in methods like Object.keys(), Object.values(), JSON.stringify() etc.
Using these avoids reimplementing repetitive tasks.

For example:

// Get object keys 
const keys = Object.keys(user);

// Convert object to JSON
const json = JSON.stringify(user);

The built-in object methods help keep code tidy and reusable.

8. Use Rest/Spread Properties:

The rest/spread syntax allows us to handle function parameters and array elements in flexible ways.

For example:

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

// Spread syntax 
const newArray = [...array, 'new item'];

9. Use Let & Const:

Using let and const avoids unintended behavior from var.
They make sure variables are block-scoped and constants can't be reassigned.

For example:

// var is function scoped 
if(true) {
  var snack = 'chips';
}
console.log(snack); // chips 

// let and const are block scoped
if(true) {
  let fruit = 'apples';
  const color = 'red';
}
// fruit not defined here

Let and const help beginners remember best practices.

Summary:

These JavaScript hacks bring elegance to your code—perfect for beginners and pros alike. Happy coding!

Resource

https://dev.to/taqui_786/the-top-10-javascript-tricks-for-cleaner-code-422b

How to Update NPM Packages:

Ashwan Lal — Sun, 24 Dec 2023 16:25:53 +0000

The Node Package Manager (npm) provides various features to help you install and maintain your project's dependencies.

Dependencies can become outdated over time due to :

bug fixes.
new features.
and other updates.

The more project dependencies you have, the harder it is to keep up with these updates.

Outdated packages can pose a threat to:

security and
can have negative effects on performance.

Up-to-date packages prevent vulnerabilities. This means that periodic dependency checks and updates are important.

How to Keep Dependencies Up-To-Date

Now, you could go through each individual package in package.json one by one to change the version and
run:

npm install (package_name)@latest

to get the latest version. But this isn't going to be the most efficient method.

Here's a workflow that helps me stay on top of updates:

first, discover which packages need to be updated and
how far behind the versions are.

Next, choose to update packages individually or together in a batch. Always test out the updates to ensure breaking changes haven't occurred.

What are Breaking changes

Breaking changes refer to modifications, enhancements, or updates in a software library or package that are not backward-compatible. In other words, when a breaking change is introduced, it may cause existing code that relies on the previous version of the library or package to fail or behave unexpectedly.

I prefer to perform major version updates individually. With major updates, you're likely to encounter breaking changes. It's much easier to undo or address code changes in relation to one package compared to many.

In this article, I will go over methods to inspect and upgrade dependencies in detail.

How to Use the npm outdated Command

run:

npm outdated

This command will check every installed dependency and compare the current version with the latest version in the npm registry. It is printed out into a table outlining available versions.

It is built into npm so there are no additional packages required to download. npm outdated is a good place to start for an overview of the number of dependency updates required.

Current is the current version installed.
Wanted is the max version of the package according the semver range.
Latest is the version of the package tagged as latest in the npm registry.

With this method, to install updates for every package, you just need to run:

npm update

Keep in mind that with npm update it will never update to a major breaking-changes version. It updates the dependencies in package.json and package-lock.json. It will use the "wanted" version.

To obtain the "latest" version append @latest to individual installs, for example: npm install react@latest.

How to Use npm-check-updates

For an advanced and customizable upgrading experience, I'd recommend npm-check-updates. This package can do everything npm outdated and npm upgrade can do with some added customization options. It does require a package installation, however.

To get started, install the npm-check-updates package:

npm i npm-check-updates

Then, run

ncu

to display packages to upgrade. Similar to npm outdated it will not apply any changes.

To upgrade dependencies, you just need to run:

ncu --upgrade

ncu -u

Red = major
Cyan = minor
Green = patch

This updates dependencies in only the package.json file and will select the latest version even if it includes a breaking change. With this method, npm install is not run automatically so be sure to run that afterward to update package-lock.json.

To choose your preferred version type, run ncu --target [patch, minor, latest, newest, greatest].

How to Use Interactive Mode with npm-check-updates

run:

ncu --interactive

ncu -i

Interactive mode allows you to select specific packages to update. By default, all packages are selected.

Navigate down through each package and use space to deselect, and enter when you are ready to upgrade all of the selected packages.
There are several ways to elevate the interactive npm-check-updates experience.

ncu --interactive --format group

This command groups and organizes packages into major, minor and patch releases.
npm-check-updates provides other useful tools such as doctor mode which installs upgrades and runs tests to check for breaking changes.

I highly suggest taking a look at the documentation overall to learn more about all this package has to offer. The project is well-maintained along with a climbing weekly download rate of ~323,861 at the time of writing this article.

Summary

Getting in the habit of regularly updating your dependencies will help your:

apps' security and
performance.

Resource

https://www.freecodecamp.org/news/how-to-update-npm-dependencies/