45:[{"uid":"136bm5n0yf6a","question":"In this e-commerce product list component, what's causing unnecessary re-renders and how would you fix it?","createdAt":"$D2025-01-07T22:10:49.806Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"136bm5n0yf69","codeSnippet":"

const ProductList = ({ products, onAddToCart }) => {\n    const [sortedProducts, setSortedProducts] = useState([]);\n    \n    const sortProducts = () => {\n        return products.sort((a, b) => b.price - a.price);\n    };\n    \n    useEffect(() => {\n        setSortedProducts(sortProducts());\n    }, [products]);\n    \n    const handleAddToCart = (productId) => {\n        onAddToCart(productId);\n    };\n    \n    return (\n        <div className=\"grid grid-cols-3 gap-4\">\n            {sortedProducts.map(product => (\n                <div key={product.id} className=\"p-4 border rounded\">\n                    <h3>{product.name}</h3>\n                    <p>${product.price}</p>\n                    <button onClick={() => handleAddToCart(product.id)}>\n                        Add to Cart\n                    </button>\n                </div>\n            ))}\n        </div>\n    );\n};

","hint":"Think about function recreation and when sorting operations occur.","dailyQuestion":false,"difficulty":"MEDIUM","customQuestion":false,"slug":"fix-product-list-unnecessary-rerenders-with-usememo","slugGenerated":true,"description":null,"title":"Optimizing React Product List: Preventing Re-renders with useMemo and useCallback","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"136bm5n105mv","question":"Complete the missing code in this custom form validation hook:","createdAt":"$D2025-01-07T22:12:10.755Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"136bm5n105mt","codeSnippet":"

function useFormValidation(initialState) {\n    const [values, setValues] = useState(initialState);\n    const [errors, setErrors] = useState({});\n    const [isSubmitting, setIsSubmitting] = useState(false);\n\n    useEffect(() => {\n        if (isSubmitting) {\n            ________________________\n            ________________________\n            ________________________\n        }\n    }, [values, isSubmitting]);\n\n    function handleChange(event) {\n        const { name, value } = event.target;\n        setValues(prev => ({\n            ...prev,\n            [name]: value\n        }));\n    }\n\n    function handleSubmit(event) {\n        event.preventDefault();\n        setErrors(validate(values));\n        setIsSubmitting(true);\n    }\n\n    return {\n        values,\n        errors,\n        handleChange,\n        handleSubmit,\n        isSubmitting\n    };\n}

","hint":"Consider state updates and validation timing.","dailyQuestion":false,"difficulty":"MEDIUM","customQuestion":false,"slug":"complete-custom-form-validation-hook-react","slugGenerated":true,"description":null,"title":"React Custom Form Validation Hook: Completing the useEffect Logic for Error Handling","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"136bm5n1223f","question":"What's the optimal way to implement the missing parts of this theme provider?","createdAt":"$D2025-01-07T22:13:39.479Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"136bm5n1223c","codeSnippet":"

const ThemeContext = createContext();\n\nconst themes = {\n    light: {\n        background: '#fff',\n        text: '#000',\n        primary: '#0070f3'\n    },\n    dark: {\n        background: '#1a1a1a',\n        text: '#fff',\n        primary: '#0070f3'\n    }\n};\n\nconst ThemeProvider = ({ children }) => {\n    const [theme, setTheme] = useState('light');\n    const [customColors, setCustomColors] = useState({});\n\n    ________________________\n    ________________________\n    ________________________\n\n    return (\n        <ThemeContext.Provider value={value}>\n            <div style={{ \n                background: currentTheme.background,\n                color: currentTheme.text \n            }}>\n                {children}\n            </div>\n        </ThemeContext.Provider>\n    );\n};

","hint":"Consider context value referential equality and performance.","dailyQuestion":false,"difficulty":"HARD","customQuestion":false,"slug":"optimal-implementation-react-theme-provider-context","slugGenerated":true,"description":null,"title":"Implementing a React Theme Provider with Context API and Custom Color Support","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"136bm5n14ehx","question":"Why isn't the cart count updating immediately in this component?","createdAt":"$D2025-01-07T22:15:28.865Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"136bm5n14ehu","codeSnippet":"

const ShoppingCart = () => {\n    const [cartItems, setCartItems] = useState([]);\n    const [cartCount, setCartCount] = useState(0);\n\n    const addToCart = (product) => {\n        setCartItems([...cartItems, product]);\n        setCartCount(cartItems.length);\n    };\n\n    return (\n        <div>\n            <h2>Cart ({cartCount} items)</h2>\n            <div className=\"grid grid-cols-2 gap-4\">\n                {cartItems.map(item => (\n                    <div key={item.id} className=\"p-2 border\">\n                        <p>{item.name}</p>\n                        <p>${item.price}</p>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};

","hint":"Think about state updates and their timing.","dailyQuestion":false,"difficulty":"EASY","customQuestion":false,"slug":"react-cart-count-not-updating-immediately","slugGenerated":true,"description":null,"title":"React useState Cart Count Not Updating Immediately After Adding Items","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"136bm5n17qw5","question":"Complete the missing code to make this controlled form component work:","createdAt":"$D2025-01-07T22:18:04.897Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"136bm5n17qw1","codeSnippet":"$5a","hint":"Consider immutable state updates and object spread syntax.","dailyQuestion":false,"difficulty":"EASY","customQuestion":false,"slug":"complete-react-controlled-form-handlechange-function","slugGenerated":true,"description":null,"title":"How to Implement handleChange Function in React Controlled Form Component","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"136bm5n1ca7y","question":"You're building a modal component that needs to render outside the main app container. Why is this implementation causing the modal to disappear unexpectedly?","createdAt":"$D2025-01-07T22:21:36.570Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"136bm5n1ca7w","codeSnippet":"

const Modal = ({ isOpen, children }) => {\n    const modalRoot = document.getElementById('modal-root');\n    const modalElement = document.createElement('div');\n    \n    useEffect(() => {\n        if (isOpen) {\n            modalRoot.appendChild(modalElement);\n        }\n        return () => {\n            modalRoot.removeChild(modalElement);\n        };\n    }, [isOpen]);\n\n    return isOpen ? createPortal(children, modalElement) : null;\n};

","hint":"Think about component re-renders and DOM element creation.","dailyQuestion":false,"difficulty":"MEDIUM","customQuestion":false,"slug":"react-modal-portal-disappearing-issue","slugGenerated":true,"description":null,"title":"React Portal Modal Disappearing: Fix for Modal Component Lifecycle with useEffect","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"136bm5n1ejje","question":"Complete the state update logic for this sortable list component:","createdAt":"$D2025-01-07T22:23:21.958Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"136bm5n1ejjb","codeSnippet":"

const DraggableList = ({ items }) => {\n    const [list, setList] = useState(items);\n    const [draggedItem, setDraggedItem] = useState(null);\n\n    const handleDragStart = (item) => setDraggedItem(item);\n\n    const handleDragOver = (e, targetItem) => {\n        e.preventDefault();\n        if (draggedItem?.id === targetItem.id) return;\n        \n        _______________________\n        _______________________\n        _______________________\n    };\n\n    return (\n        <ul className=\"space-y-2\">\n            {list.map(item => (\n                <li\n                    key={item.id}\n                    draggable\n                    onDragStart={() => handleDragStart(item)}\n                    onDragOver={(e) => handleDragOver(e, item)}\n                    className=\"p-2 bg-gray-100 rounded cursor-move\"\n                >\n                    {item.text}\n                </li>\n            ))}\n        </ul>\n    );\n};

","hint":"Consider array splice operations and index tracking.","dailyQuestion":false,"difficulty":"HARD","customQuestion":false,"slug":"react-sortable-list-drag-and-drop-state-update","slugGenerated":true,"description":null,"title":"How to Implement Drag and Drop Sorting Logic in React List Component","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"1f3qm5k0a16x","question":"You're building a React component for a weather dashboard. Which implementation correctly updates the temperature display?","createdAt":"$D2025-01-05T19:28:33.413Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"1f3qm5k0a16u","codeSnippet":"

function WeatherDisplay() {\n  const [temp, setTemp] = useState(20);\n  \n  const updateTemp = () => {\n    setTemp(temp + 1);\n    setTemp(temp + 1);\n    setTemp(temp + 1);\n  };\n\n  return (\n    <div>\n      <p>Temperature: {temp}°C</p>\n      <button onClick={updateTemp}>Increase</button>\n    </div>\n  );\n}

","hint":"Consider React's state batching behavior","dailyQuestion":false,"difficulty":"EASY","customQuestion":false,"slug":"react-temperature-state-update-batching","slugGenerated":true,"description":null,"title":"React useState: How to Correctly Update Temperature State Multiple Times","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"1f3qm5k0np47","question":"When building a music streaming app, you notice user actions (like seeking in a track) are causing too many API calls. How would you optimize the custom hook below to reduce server load while maintaining a smooth user experience?","createdAt":"$D2025-01-05T19:39:10.947Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"1f3qm5k0np43","codeSnippet":"

function useTrackProgress({ trackId, onTimeUpdate }) {\n  const [currentTime, setCurrentTime] = useState(0);\n  const [isSeeking, setIsSeeking] = useState(false);\n  const audioRef = useRef(null);\n  \n  const handleSeek = (newTime) => {\n    setIsSeeking(true);\n    setCurrentTime(newTime);\n    // Missing optimization code here\n    audioRef.current.currentTime = newTime;\n    onTimeUpdate(newTime);\n    setIsSeeking(false);\n  };\n  \n  useEffect(() => {\n    // Sync with server\n    const updateServer = () => {\n      if (!isSeeking) {\n        fetch('/api/tracks/progress', {\n          method: 'POST',\n          body: JSON.stringify({\n            trackId,\n            timestamp: currentTime\n          })\n        });\n      }\n    };\n    \n    updateServer();\n  }, [currentTime, trackId, isSeeking]);\n  \n  return { currentTime, handleSeek };\n}

","hint":"Think about preserving function references and cleanup.","dailyQuestion":false,"difficulty":"MEDIUM","customQuestion":false,"slug":"optimize-track-seeking-api-calls-react-hook","slugGenerated":true,"description":null,"title":"Optimizing React Custom Hook for Music Player Seeking with Debounce","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"uid":"1f3qm5k0r2g4","question":"While building a content management system, your team needs to implement a document autosave feature. What's missing from this code to prevent excessive save operations?","createdAt":"$D2025-01-05T19:41:48.192Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"1f3qm5k0r2g0","codeSnippet":"

function DocumentEditor() {\n  const [content, setContent] = useState('');\n  const [status, setStatus] = useState('saved');\n  const lastSaved = useRef(null);\n\n  // Missing autosave implementation\n  const handleSave = async () => {\n    try {\n      await saveDocument(content);\n      lastSaved.current = Date.now();\n      setStatus('saved');\n    } catch (error) {\n      setStatus('error');\n    }\n  };\n\n  return (\n    <div className=\"editor\">\n      <textarea\n        value={content}\n        onChange={(e) => {\n          setContent(e.target.value);\n          setStatus('unsaved');\n          handleSave();\n        }}\n      />\n      <div className=\"status\">\n        Status: {status}\n        {lastSaved.current && \n          ` (Last saved: ${new Date(lastSaved.current).toLocaleTimeString()})`\n        }\n      </div>\n    </div>\n  );\n}

","hint":"Think about user typing patterns and cleanup.","dailyQuestion":false,"difficulty":"EASY","customQuestion":false,"slug":"react-document-editor-autosave-debounce-implementation","slugGenerated":true,"description":null,"title":"Implementing Debounced Autosave in React Document Editor with useEffect Hook","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false}]