1d:[{"uid":"136bm5n0vhgp","question":"Implement the missing transition logic in this state machine:","createdAt":"$D2025-01-07T22:08:32.805Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"136bm5n0vhgl","codeSnippet":"

class StateMachine {\n    constructor(initialState, transitions) {\n        this.currentState = initialState;\n        this.transitions = transitions;\n        this.history = [];\n        this.subscribers = new Set();\n    }\n\n    transition(event, payload = {}) {\n        const currentTransitions = this.transitions[this.currentState];\n        _______________________\n        _______________________\n        _______________________\n        _______________________\n    }\n\n    subscribe(callback) {\n        this.subscribers.add(callback);\n        return () => this.subscribers.delete(callback);\n    }\n}\n\nconst machine = new StateMachine('idle', {\n    idle: {\n        START: { target: 'running', action: () => console.log('Starting...') },\n        ERROR: { target: 'error' }\n    },\n    running: {\n        PAUSE: { target: 'paused' },\n        COMPLETE: { target: 'completed' },\n        ERROR: { target: 'error' }\n    }\n});

","hint":"Consider error handling, history tracking, and subscriber notifications.","dailyQuestion":false,"difficulty":"HARD","customQuestion":false,"slug":"implement-missing-state-machine-transition-logic","slugGenerated":true,"description":null,"title":"Implementing State Transitions in JavaScript State Machine with Event Handling","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false},{"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":"$64","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":"1f3qm5k0jspx","question":"In an e-commerce product catalog, you need to implement a search feature that highlights matching terms. Which approach fixes the performance issue in this code?","createdAt":"$D2025-01-05T19:36:08.993Z","updatedAt":"$D2025-01-31T22:40:38.455Z","questionDate":"","answerResource":null,"correctAnswer":"1f3qm5k0jspt","codeSnippet":"

function ProductSearch({ products, searchTerm }) {\n  const [filteredProducts, setFilteredProducts] = useState([]);\n  const [highlight, setHighlight] = useState('');\n  \n  useEffect(() => {\n    const results = products.filter(product => \n      product.name.toLowerCase().includes(searchTerm.toLowerCase())\n    );\n    setFilteredProducts(results);\n    setHighlight(searchTerm);\n  }, [searchTerm, products]);\n\n  return (\n    <div>\n      {filteredProducts.map(product => (\n        <div key={product.id} className=\"product-card\">\n          <HighlightText\n            text={product.name}\n            highlight={highlight}\n          />\n          <p>{product.price}</p>\n        </div>\n      ))}\n    </div>\n  );\n}

","hint":"Consider what happens when a user types quickly in a search input","dailyQuestion":false,"difficulty":"MEDIUM","customQuestion":false,"slug":"optimize-product-search-performance-with-debouncing-react","slugGenerated":true,"description":null,"title":"React: Optimizing Product Search Performance with Debounced Text Highlighting","questionType":"MULTIPLE_CHOICE","expectedParams":null,"functionName":null,"returnType":null,"testCases":null,"nextQuestionSlug":null,"previousQuestionSlug":null,"isPremiumQuestion":false}]