remarkablemark

Lern and Yarn
Lerna and Yarn

This article goes over how to set up a Lerna monorepo with Yarn workspaces.

Lerna

Create a new Lerna monorepo with lerna init:

$ npx lerna init

Initialized Lerna files should look like:

$ tree
.
├── lerna.json
├── package.json
└── packages
1 directory, 2 files

Optional: To enable independent versioning mode in lerna.json:

Yarn

Enable Yarn workspaces in package.json:

Then add npmClient and useWorkspaces to lerna.json:

Now when you run yarn install, Yarn bootstraps and hoists node modules to the project root directory:

$ yarn

This means that devDependencies shared across packages can be saved to the project root package.json:

$ yarn add --dev eslint -W

Resources

Check out the example repository lerna-template.

This article was originally published on remarkablemark.org on September 18, 2021.

React

This article goes over the React useEffect hook lifecycle:

  • Mount
  • Update
  • Unmount

Prerequisites

Import useEffect:

import { useEffect } from 'react';

Mount

Component did mount:

useEffect(() => {
console.log('mount');
}, []);

Update

Component did update:

useEffect(() => {
console.log('update');
});

Component did update on data change:

useEffect(() => {
console.log('update on data change');
}, [data]);

Component will unmount or did update on data change:

useEffect(() => {
return () => {
console.log('update on data change or unmount');
};
}, [data]);

Unmount

Component will unmount:

useEffect(() => {
return () => {
console.log('unmount');
};
}, []);

This article was originally published on remarkablemark.org on August 22, 2021.