DEV Community: Tom Hastjarjanto

How to write React components in TypeScript (2022)

Tom Hastjarjanto — Wed, 23 Nov 2022 19:38:05 +0000

Introduction

React is a small library, yet it offers its users a lot of flexibility in how to use it. React is a library that allows users to create component-based applications, so naturally creating components is what will be the foundation of your application code. However, React offers multiple ways to define components, and is not very clear in which cases which method is preferred. This raises a lot of questions from both beginners and experienced React developers. Is there a best way to write a React component? In a codebase consistency is a property that is highly valued for the maintainability of your application.

React component definitions

React.createClass

The original way to create React components was through calling the function React.createClass. An object containing the lifecycle methods was passed to define the component. It is unlikely you will encounter components using this method in the current codebase since this method has been deprecated since React 15.5.0.

// https://jsfiddle.net/vjeux/VkebS/
var Hello = React.createClass({
  render: function () {
    return React.DOM.div({}, "Hello " + this.props.name);
  },
});
Hello = React.createFactory(Hello);

React.render(Hello({ name: "World" }), document.body);

ES6 Class-based components

React introduced ES6 class-based components in React 0.13. Class-based components are the most verbose way to define a React component. They are the most flexible in terms of the methods you can implement on the component. They offer the most control over the component lifecycle. Class-based components have dedicated methods that are triggered during the component lifecycle.

Deprecation

Class components are still supported by React, but we don’t recommend using them in new code.

If you work on an existing code base, you might have seen them. If you are writing a new React application, it is not the preferred way to write components. However, they remain fully supported and the recommendation from the React team is to not spend time on rewriting these components unless you already had plans to rewrite them for other reasons (such as bug fixes).

class MyComponent extends React.Component<MyComponentProps> {
  render() {
    return <div>Hello World</div>;
  }
}

PureComponent

For performance reasons, you might not want your component to be re-rendered unless either state or props are changed. In this case, the PureComponent was used. Currently, better alternatives are available, but PureComponent remains available in React.

class MyComponent extends React.PureComponent<MyComponentProps> {
  render() {
    return <div>Hello World</div>;
  }
}

Stateless Function Components

Stateless function components were introduced in React 0.14. They are the most concise way to define a React component. Stateless Function components were introduced to being able to write components with a more simple syntax for components that do not have a state. Since they were introduced using arrow functions, it became a common practice to write these as such.

const MyComponent: React.FC<MyComponentProps> = (props) => {
  return <div>Hello World</div>;
};

hen TypeScript support was added, the React.SFC<T> type was introduced, later renamed to React.FC. This type helps to define the return type, and a few optional properties as well as a generic type parameter for custom properties. In React 18, the children property is removed.

interface FunctionComponent<P = {}> {
  (props: P, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

Function-based components

Using arrow functions was a concise way to define components, however, it came with a few downsides as discussed in this pull request.

Provides an implicit definition of children. This is solved in React 18.
Doesn't support generics.
Makes "component as namespace pattern" more awkward.

The more simple function definition using a simple type for its properties resolves these issues. This style of writing components is also used in the new React documentation as well as the preferred style in the Airbnb JavaScript Style guide.

type MyComponentProps<T> = {
  genericProp: T;
};

function MyComponent<T>(props: MyComponentProps<T>) {
  return <div>Hello World</div>;
}

function SubComponent() {
  return <p>...</p>;
}

MyComponent.SubComponent = SubComponent;

Conclusion

Historically, there have been several best ways to write React components. You likely have an existing codebase that uses a mixture of different ways to define components. It will be hard to move the legacy class-based components to function components, however, it might be feasible to go for the function declaration style for stateless components.

For new components, it does make sense to follow the style defined in the React documentation by writing components using a function definition. However, arrow functions using React.FC also remain a popular choice and are used by Vercel and the official TypeScript website

Iterable gotcha's in Python

Tom Hastjarjanto — Sun, 06 Nov 2022 09:56:17 +0000

What are Iterables?

Typehints have been introduced in
Python since Python 3.5. As part of this introduction, a new module typing was
introduced which contained various types for built-in collections and Abstract
Base Classes. Iterable is a type that is prominantly used in the PEP for Type hints and is implemented by many of the most used Python collections. Since Python 3.9, this type can be imported from collections.abc and can be used as a type as well as an Abstract Base Class.

When to use Iterables?

If you enthousiastically started using type hints in Python and have been following best practices to accept the most generic type possible in your arguments, you might have been using Iterable. Iterable can be used at any place where your code expects the variable to implement __iter__, in other words, where you code wants to iterate through a collection of some sorts.

Say you want to send an email to multiple receivers:

class MailApi:
    def sendmail(self, sender: str, receiver: str, message: str) -> None:
        ...


api = MailApi()


def send_emails(message: str, sender: str, receivers: Iterable[str]) -> Optional[T]:
    if not receivers:
        raise ValueError("you need atleast one receiver")

    for receiver in receivers:
        api.sendmail(sender, receiver, message)

If you send an email using the following code you will send an email:

send_emails(
    "Hello",
    "me@example.com",
    ["steve@example.com", "larry@example.com", "elon@example.com"],
)

If you use the following code, you will get an exception:

send_emails("Hello", "me@example.com", [])

Pitfalls

But what if you did this?

send_emails(
    "Hello",
    "me@example.com",
    filter(
        lambda x: not x.endswith("example.com"),
        ["steve@example.com", "larry@example.com", "elon@example.com"],
    ),
)

You would intuitively expect an exception, because the filter will remove all matching emails, but Nothing will happen!

filter returns a valid Iterable and MyPy correctly asserts that there are no type errors. What is going on?

The pythonic way, to check if a collection is empty, is to use if not <collection_name. This works because Python returns False when __len__ returns 0. However, Iterable is not required to implement __len__ as well as __bool__. The default truth value is True, so even though your code is perfectly Type safe, it will not do what you might expect. A solution to this problem is not simple, but you could prevent similar bugs by using a slightly less generic type such as Collection, which does require __len__ to be implemented, if you want to catch these errors with a type checker.

Conclusion

The new Python type hints are a welcome addition to the language and boost maintainability, reduce bugs and allow better editor support for Python. However, due to historic design decsicions there are subtle cases which can result in bugs in ways you wouldn't expect from type safe code. If you use Iterable in Python, consider using Collection.

DEV Community: Tom Hastjarjanto

How to write React components in TypeScript (2022)

Introduction

React component definitions

React.createClass

ES6 Class-based components

Deprecation

PureComponent

Stateless Function Components

Function-based components

Conclusion

Further reading

Iterable gotcha's in Python

What are Iterables?

When to use Iterables?

Pitfalls

Conclusion