Laura Chan lwkchan

Testing with env vars

To test with different kinds of env vars in different unit tests we need to do the following.

set up the vars on process.env.NODE_ENV
run the test
reset it

Step three is very important since process.env is a global variable, we want to make sure that when every test uses it, it returns what is expected.

useLayoutEffect vs useEffect

useEffect

Fires after render (to virtual DOM) and browser paint
Will not block the browser from updating the screen as it runs asynchronously
Useful for side effects which are not concerned with DOM information

useLayoutEffect

Similar to componentDidMount/componentDidUpdate
Runs synchronously run after the DOM has been modified

	document.body.addEventListener('keydown', function(e) {
	if (e.which === 9) {
	setTimeout(function() {
	console.log(document.activeElement);
	}, 100);
	}
	})

	// Script for lazy loading off screen images and background css images
	// Also checks for webp support and adds that image if provided

	// <img class="lazy-load" data-src="path-to-image.jpeg" /> // images with no webp support

	// <div class="lazy-load-bg" data-src="path-to-image.jpeg" [data-src-webp="path-to-image.webp"]></div> // css background images. data-src-webp is optional

	// <picture> // <picture> with webp support:
	// <source class="lazy-load" data-srcset="path-to-img.webp" type="image/webp">
	// <source class="lazy-load" data-srcset="path-to-img.jpg" type="image/jpeg">

	import React from "react";
	import ReactDOM from "react-dom";

	import "./styles.css";

	const getNumericValueWithCommas = (value) => {
	const separator = ",";
	let output = "";
	const numbersArray = value
	.toString()

	import {useState} from 'react';
	import Cookies from 'universal-cookie';

	const useCookie = (key, options = {}) => {
	const cookies = new Cookies();
	const [item, setItemValue] = useState(() => {
	if (cookies.get(key)) {
	return cookies.get(key);
	}
	return null;