DEV Community: Josiah Ayres

Mantine Themes in Storybook 🤯

Josiah Ayres — Sun, 10 Jul 2022 10:34:49 +0000

Are you currently using Storybook and Mantine component library to develop your React application?

If so, my newly published storybook addon might make your life easier!

Key Features

Easily have Storybook display your custom theme for all Stories.
Switch between multiple custom themes (e.g. dark and light mode) directly from the Mantine Theme addon panel.

See it in action

This link will take you to the test Storybook, click on the Mantine Theme addon to switch between two predefined themes & see the Mantine button reflect it.

josiahayres.github.io

How to install

You can get the Storybook addon here.

npm i -D storybook-addon-mantine
Register the addon .storybook/main.js
Provide your theme(s) to the addon .storybook/preview.js

See full details on my GitHub page

What's next?

I'd like to be able to showcase the values of the currently selected theme, and eventually customise the theme directly from storybook.

Would you use this functionality if it existed? Is it sufficient being able to configure the themes in the storybook preview file?

Read this before using React 18...

Josiah Ayres — Sat, 21 May 2022 02:07:53 +0000

React 18 was released on 29 March 2022.

After reading the How to Upgrade to React 18 blog post these were my key takeaway points:

Updates to Client Rendering APIs, one minor change to apply in your main index.tsx file:

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

Updates to TypeScript definitions. Developers must now explicitly list the children prop when defining props, for example:

interface MyButtonProps {
  color: string;
  children?: React.ReactNode;
}

The blog post explains the other changes and additions to React 18, however most React developers won't need to do anything.

This gave me confidence to jump right in to upgrading my application to React 18.

The Upgrade to 18

Straight away I noticed some weird behaviours:

Jumping into the console, I could see that my component "setup" useEffect, with an empty dependency array was being triggered twice.
I was sure I hadn't changed the component code, and could not understand why I was seeing my component double rendering.

Catastrophe No GIF by Cultura - Find & Share on GIPHY

Discover & share this Cultura GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

A quick Google search pointed to the <StrictMode /> component being the cause.

The (interim) fix

Changing my code from

import { StrictMode } from "react";
import * as ReactDOMClient from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

import * as ReactDOMClient from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
    <App />
);

seemed to fix all the issues and double rendering of setup functions.

The cause

From the bottom end of the React 18 Upgrade Guide post they explain:

To demonstrate the development behavior you’ll see in Strict Mode with this feature, consider what happens when React mounts a new component. Without this change, when a component mounts, React creates the effects:
* React mounts the component.
  * Layout effects are created.
  * Effects are created.
With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component:
* React mounts the component.
    * Layout effects are created.
    * Effect effects are created.
* React simulates effects being destroyed on a mounted component.
    * Layout effects are destroyed.
    * Effects are destroyed.
* React simulates effects being re-created on a mounted component.
    * Layout effects are created
    * Effect setup code runs
On the second mount, React will restore the state from the first mount. This feature simulates user behavior such as a user tabbing away from a screen and back, ensuring that code will properly handle state restoration.

The proper fix

Adding in a return statement to the useEffect to handle the cleanup of the effect on unmount.

import { useEffect, useState } from "react";

const intervalInMs = 100;
const minuteInMs = 1000;

export const React18SafeTimer = () => {
  const [timeInSeconds, setTime] = useState(0);
  const [updateTimerInterval, setUpdateTimerInterval] = useState(0);

  useEffect(() => {
    console.log("React 18 Timer Setup");
    const timerInterval = setInterval(
      () => setTime((t) => t + intervalInMs / minuteInMs),
      intervalInMs
    );
    setUpdateTimerInterval(timerInterval);
    // THE FIX: Add next line to properly clean up useEffect
    return () => clearInterval(timerInterval);
  }, []);

  const handleClearTimer = () => {
    clearInterval(updateTimerInterval);
  };

  return (
    <>
      <p>seconds since page load: {timeInSeconds.toFixed(1)}</p>
      <button onClick={handleClearTimer}>Stop Timer</button>
    </>
  );
};

See more at the Hooks API Reference page.

If you're having issues after upgrading to React 18, take a look at any of the following, as StrictMode changes around unmounting and remounting changes includes:

componentDidMount

componentWillUnmount

useEffect

useLayoutEffect

useInsertionEffect

See this page for more details.

Why should I use StrictMode?

StrictMode is a (development mode) tool for highlighting potential problems in an application. It does not run in Production environment. Like Fragment, StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

StrictMode currently helps with:

Identifying components with unsafe lifecycles
Warning about legacy string ref API usage
Warning about deprecated findDOMNode usage
Detecting unexpected side effects
Detecting legacy context API
Ensuring reusable state
Additional functionality will be added with future releases of React.

Why has React made these changes?

In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React support remounting trees using the same component state used before unmounting.

This feature will give React better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects do not properly clean up subscriptions in the destroy callback, or implicitly assume they are only mounted or destroyed once.

To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

Additional discussions on GitHub that gave a lot more context into the "why" behind the changes to StrictMode:

Summary

React 18 introduces changes which can lead to an unexpected Developer experience and messier console logs with same messages being triggered twice. It also introduces different application behaviour when running in development mode vs production, which is arguably undesirable.

While these changes have been done for a good reason, and should be embraced rather than ignored, React devs need to know what to expect before upgrading. Hopefully this guide helps save you time and answers your questions.

Create a Python Layer for your AWS Lambda Function

Josiah Ayres — Mon, 06 Dec 2021 23:51:18 +0000

Background

I just finished creating a few small lambda functions using Python.
Layers are a great way to manage application dependencies, and speeding up your deployment times.

My project needed the following libraries:

requests for making HTTP requests.
pysftp for creating SSH connections to different servers.

If you need a different library, the approach should be the same, assuming it's installable using pip or pip3.

Unfortunately we didn’t have access to Container Registry (ECR) so we couldn't create a docker container, which would have allowed us to install the dependencies as part of the docker container creation.

We instead had to create & upload a zip file containing our application code and dependencies.

While we could include the application dependencies in the zip we upload, this has a few disadvantages:

It slows down each upload, which is not ideal as you might end up uploading a number of times.
Your application code will not be viewable in the lambda console if your zip file ends up too large.

Creating a AWS Lambda layer

Application Setup

So now we know why layers might be needed in your lambda function, let's look at how to create one.

The sample project is also available on GitHub.

Folder structure of a lambda layer:

/requirements.txt
/python/

Where requirements.txt is a file with the names of the packages we’re using, and python is an empty folder which we will be installing dependencies into. See the Lambda layer documentation for more information on why we need to install into the python folder.

My application folder on my computer looks something like this then:

/lambda_function.py
/lambda_layer/requirements.txt
/lambda_layer/python/

Setup Ubuntu VM

AWS Lambda runs in a Linux machine, so you'll need to install the layer dependencies using an Linux OS. You can't directly follow these steps in MacOS or Windows.

I won't cover how to create a Linux VM, as there are many good tutorials available with a quick search online.

Create the layer ZIP file

Remember, you need to run these commands in a Linux machine.

Navigate into the layer folder:
cd lambda_layer

Install the dependencies into the python folder:
pip install -r requirements.txt -t .python

Create the lambda layer zip:
zip -r ../app-name-depts-layer.zip *

We now have a ZIP file (app-name-depts-layer.zip) which can be uploaded to AWS as a Layer. This zip file should have a python folder inside it, with the application dependencies installed from pip inside.

Create the layer in AWS

Navigate to your AWS instance, and open Lambda function. Click the create layer button:

Fill in the details of your layer:

I recommend including the names of the packages that are included in the layer, as part of the description. This will be useful in the future, especially if you end up creating and using multiple layers.

Click Create layer

Configure Lambda function to use Layer.

In your lambda function, scroll down to the bottom of the page, to the Layers section:

Click on the Add a layer button

Select Custom layers, then select the layer you just created, picking the latest version:

Wait for the function to update:

That’s it!

Test it out

Now in your application code, you can simply import the packages installed in the layer.

lambda_function.py

import requests

def lambda_handler(event, context):
    test_url = 'https://jsonplaceholder.typicode.com/todos/1'
    response = requests.get(test_url)

    return {
        'statusCode': response.status_code,
        'body': response.json()
    }

In the console it should look like this:

Testing this code should return:

You now have the ability to make HTTP requests and can easily reuse the layer in different applications.

Hopefully this helps get you started, you can easily extend this out as needed...