BarthesSimpson

function Icon({ i, char, reverse = false }) {
  const padding = Array.from({ length: i }, (_, i) => (
    <span key={i}>&nbsp;</span>
  ))
  return reverse ? [char, ...padding] : [...padding, char]
}

function Happy({ i }) {
  return <Icon i={i} char="ᕕ( ᐛ )ᕗ" />
}

BarthesSimpson

const MLetterInput = memo(
  LetterInput,
  ({ value: _old }, { value: _new }) => _old === _new
)

//... Inside the render method of <Form/>

      {Object.keys(alphabet).map((l, i) =>
        state.itMatters ? (
          <MLetterInput

BarthesSimpson

import { useEffect } from "react"

const TIMER_WINDOW = 20000
const TYPING_DELAY = 20
const MAX_LENGTH = 20

export const useTyping = (setState) =>
  useEffect(() => {
    const inputs = document.getElementsByClassName("input-letter")
    Array.from(inputs).forEach((el, idx) => {

BarthesSimpson

function Form({ state, setState }) {
  const toggle = useCallback(() => {
    setState(state => ({ ...state, itMatters: !state.itMatters }))
  })
  const changeLetter = useCallback(l => e =>
    setState(state => ({ ...state, [l]: e.target.value }))
  )
  return (
    <form name="f">
      <h2>Does unnecessary re-rendering matter? </h2>

BarthesSimpson

class Solution:
    I = 'I'
    V = 'V'
    X = 'X'
    L = 'L'
    C = 'C'
    D = 'D'
    M = 'M'
    def intToRoman(self, num):
        """