Asif Vora asif-simform

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

User cases (description of sequences of events that, taken together, lead to a system doing something useful)
- Who is going to use it?
- How are they going to use it?

	import { useLayoutEffect, useRef, useState, useTransition } from 'react'
	import { Router } from 'react-router-dom'
	import { BrowserHistory, createBrowserHistory, Update } from 'history'

	export interface BrowserRouterProps {
	basename?: string
	children?: React.ReactNode
	window?: Window
	}

	import {useCallback, useRef, useEffect} from 'react'
	import {useField, useFormikContext} from 'formik'
	import update from 'immutability-helper'

	const useFieldArray = props => {
	const [field, meta] = useField(props)
	const fieldArray = useRef(field.value)
	const {setFieldValue} = useFormikContext()

	useEffect(() => {

	import * as React from 'react'
	import { createPortal } from 'react-dom'

	type FrameProps = React.IframeHTMLAttributes<HTMLIFrameElement> & {
	head?: React.ComponentType<any>
	children?: React.ReactNode
	}
	const Frame = React.memo(({head, children, ...iframeProps}: FrameProps)=> {
	const node = React.useRef<HTMLIFrameElement>()
	const [doc, setDoc] = React.useState<Document>()

	# <type>: <subject> (Max 50 char, Why is this change necessary?)
	# \|<---- Using a Maximum Of 50 Characters ---->\|

	# \|<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->\|
	# Explain how the commit addresses the issue

	# IMPORTANT!! Describe any side effects of the change.

	# Provide links or keys to any relevant tickets, articles or other resources
	# Examples: "Jira issue [ABC-123]" or "Closes Github issue #123"