Aetae

const [selected, setSelected] = useState('all');

  let filterdTodos;
  switch(selected) {
    case 'all':
      filterdTodos = todos;
      break;
    case 'checked':
      filterdTodos = todos.filter(t => t.checked);
      break;
    case 'notChecked':
      filterdTodos = todos.filter(t => !t.checked);
      break;
  }

const [selected, setSelected] = useState('all');

  const filterdTodos = useMemo(() => {
    switch(selected) {
      case 'all':
        return todos;
      case 'checked':
        return todos.filter(t => t.checked);
      case 'notChecked':
        return todos.filter(t => !t.checked);
    }
  }, [selected, todos])

<select className="todos__filter" onChange={(event) =>setSelected(event.target.value)}>
...
{filterdTodos.map(...)}

const lines = [1, 2, 3];

return lines.map(line => (
  <p> {line} </p>
));

function Component() {
  const [lines, setLines] = useState([1, 2, 3]);
  const addLine = useCallback(() => {
    setLines(lines => [...lines, lines.length+1])
  });

  return(
    <>
      <button onClick={addLine} className="button">
        addLine
      </button>
      {lines.map(line => (
        <p> {line} </p>
      ))}
    </>
}

const delay = (ms) => new Promise(r => setTimeout(r, ms))

function Component() {
  const [lines, setLines] = useState([]);
  const addLines = useCallback(async () => {
    let i = 0;
    while(i++ < 10) {
      await delay(1000);  
      setLines(lines => [...lines, i])
    }
  });
  return(
    <>
      <button onClick={addLines} className="button">
        addLine
      </button>
      {lines.map(line => (
        <p> {line} </p>
      ))}
    </>
  );
}

// @run-at document-start

function addCss(css, root = window) {
  const style = root.document.createElement('style');
  style.innerHTML = css;
  (root.document.head || root.document.documentElement).append(style);
  return style;
} 

const css = `
  [class^="chat__root__"] {
    dislpay: none !important;
  }
`;

addCss(css);

// @run-at document-start

const css = `
  [class^="chat__root__"] {
    dislpay: none !important;
  }
`;

// отлавливаем загрузку фреймов
new MutationObserver(() => {
  document.querySelectorAll('iframe:not([us-processed]').forEach((iframe) => {
    if (isAccessibleFrame(iframe)) {
      // добавляем наш css
      addCss(css, iframe.contentWindow);
      
      // на случай если содержимое фрейма перепишут позднее
      iframe.addEventListener('load', () => addCss(css, iframe.contentWindow));
    }
    // помечаем что обработали этот фрем, чтоб не повторять
    iframe.setAttribute('us-processed', true);
  });
}).observe(document, {childList: true, subtree: true});

// проверяем что содержимое фрейма доступно 
function isAccessibleFrame(iframe) {
  try {
    iframe.contentWindow.test
    return true
  } catch (e) {
    return false
  }
}

PropsWithChildren<{
 prop2: string; 
 prop3: number
}>

{
    children?: ReactNode | undefined;
}