Leveraging ES2023 Array Methods in TypeScript for React

Hey Dev.to community!

Excited about the new array methods in ES2023? Here's a quick guide on using them in TypeScript, especially for React development.

ES2023 Array Methods

ES2023 brings fresh array methods, distinguishing themselves by returning a copy of the modified array instead of altering the original. This small change can significantly impact state management safety, especially in frameworks like React.

TypeScript Setup

Ensure you're on TypeScript version 5.2.2 or later. Update your tsconfig.json:

    {
      "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        // ... other configurations
      }
    }

Browser Compatibility

Consider users with outdated browsers. For broader compatibility, target an earlier ECMAScript version, like "es5" in your TypeScript configuration.

React and Beyond

The immutability of these array methods aligns well with React's principles of state management. By returning a copy of the modified array, these methods play nicely with React's paradigm, reducing the chances of inadvertent state modifications.

Example: sort vs. toSorted

Let's compare the traditional sort method with the new toSorted method:

// Using sort (modifying original array)
const originalArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const sortedArray = originalArray.sort();

console.log(originalArray); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
console.log(sortedArray);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

// Using toSorted (creating a new sorted array)
const originalArray2 = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const newSortedArray = originalArray2.toSorted();

console.log(originalArray2);  // [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]
console.log(newSortedArray);  // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

In the example above, sort modifies the original array, while toSorted creates a new sorted array, leaving the original array unchanged.

Array.prototype.toSorted()

Other new Methods

Consider exploring other new array methods.

• Array.prototype.toReversed()

• Array.prototype.toSpliced()

• Array.prototype.with()

Conclusion

As you embrace the new array methods introduced in ES2023, ensure that your development environment is configured correctly for TypeScript compatibility. Be mindful of browser compatibility considerations, and if necessary, target an earlier ECMAScript version in your project.

Happy coding!