Relaks-transform-memo

This Babel plugin simplifies development of Relaks application by automatically memoizing asynchronous components.

Before:

import { useProgress } from 'relaks';
 
export async function Widget(props) {
  const [ show ] = useProgress();
 
  /*...*/
}

After:

import Relaks, { useProgress } from 'relaks';
 
export const Widget = Relaks.memo(async function Widget(props) {
  const [ show ] = useProgress();
 
  /*...*/
});

Usage

This plugin is bundled with Relaks. There is no need to install it separately. In your Babel config, simply add it to the list of plugins:

          plugins: [
            '@babel/transform-runtime',
            '@babel/proposal-nullish-coalescing-operator',
            '@babel/proposal-optional-chaining',
            /* ... */
            'relaks/transform-memo',
          ]

Anonymous function

This plugin will also add names to components created through calls to Relaks.memo(), Relaks.use(), React.memo(), and React.forwardRef().

Before:

import Relaks from 'relaks';
 
const Widget = React.forwardRef((props, ref) => {
  return <div ref={ref} />;
});

After:

import Relaks from 'relaks';
 
const Widget = React.forwardRef(function Widget(props, ref) {
  return <div ref={ref} />;
});

Custom higher-order components

You can instruct the plugin to add names to your own higher-order components by setting the otherHOCs option:

          plugins: [
            /* ... */
            [ 'relaks/transform-memo', { otherHOCs: [ 'Tooltip.create' ] } ],
          ]

Before:

import React from 'react';
 
export const Hello = Tooltip.create('hello.svg', (props) => {
  return <div>Hello world</div>;
});

After:

import React from 'react';
 
export const Hello = Tooltip.create('hello.svg', function Hello(props) {
  return React.createElement("div", null, "Hello world");
});