frontend-challenges

frontend-challenges copied to clipboard

index.js ```js index.js export function classNames (...args) { const result=[]; if(args.length===0){ return result.join(' '); } args.forEach(el=>{ if(Array.isArray(el)){ result.push(classNames(...el)); } else if(['string','number'].includes(typeof el)){ result.push(el); } else if(el && typeof el ==='object'){...

hackcharms

169 - re-render 2 - react

1

App.jsx ```jsx App.jsx import { useState, useDeferredValue } from 'react'; import { MovingBlock } from "./components/moving-block"; import { VerySlowComponent } from './components/very-slow-component'; import { BunchOfStuff, OtherStuffAlsoComplicated } from './components/mocks'; export...

kenmori

App.jsx ```jsx App.jsx import { useState } from "react"; import { Button } from "./components/button"; import { ModalDialog } from "./components/basic-modal-dialog"; import { VerySlowComponent } from "./components/very-slow-component"; import { BunchOfStuff,...

kenmori

#174 - re-render 3

1

This is an auto-generated PR that auto reflect on #174, please go to #174 for discussion or making changes. Closes #174

github-actions[bot]

re-render 3

1

## Info ```yaml difficulty: easy title: re-render 3 type: question template: react tags: css, html, javascript ``` ## Question Consider the app that renders a SearchBar component, which is memoized...

jsartisan

components/very-slow-component.jsx ```jsx components/very-slow-component.jsx import React from "react"; const wait = (ms) => { const start = Date.now(); let now = start; while (now - start < ms) now = Date.now();...

jsartisan

App.jsx ```jsx App.jsx import { useState } from 'react'; import { MovingBlock } from "./components/moving-block"; import { VerySlowComponent } from './components/very-slow-component'; import { BunchOfStuff, OtherStuffAlsoComplicated } from './components/mocks'; export default...

jsartisan

App.jsx ```jsx App.jsx import { useState } from 'react'; import { Button } from './components/button'; import { ModalDialog } from './components/basic-modal-dialog'; import { VerySlowComponent } from './components/very-slow-component'; import { BunchOfStuff,...

jsartisan

re-render 2

1

## Info ```yaml difficulty: easy title: re-render 2 type: question template: react tags: react, performance ``` ## Question Imagine a site that has a slow component. ```jsx const App =...

jsartisan

styles.css ```css styles.css body { font-family: sans-serif; -webkit-font-smoothing: auto; -moz-font-smoothing: auto; -moz-osx-font-smoothing: grayscale; font-smoothing: auto; text-rendering: optimizeLegibility; font-smooth: always; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } main { display: flex; flex-direction: column;...

mhdtjk