Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState, useMemo, useCallback } from 'react';

const numbers = Array.from({ length: 100_000 }, (_, i) => i + 1);

function FilteredList({ threshold }) {
    // Only recomputed when `threshold` changes
    const filtered = useMemo(
        () => numbers.filter(n => n % threshold === 0),
        [threshold]
    );

return <p>Count: {filtered.length}</p>;
}

// ── useCallback example ────────────────────────────────────────────────────

import React from 'react';

const ExpensiveChild = React.memo(function ExpensiveChild({ onClick }) {
    console.log('ExpensiveChild rendered');
    return <button onClick={onClick}>Click me</button>;
});

function Parent() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');

// Stable reference – does NOT change when `text` changes
    const handleClick = useCallback(() => {
        setCount(c => c + 1);
    }, []); // no deps – setCount is stable

return (
        <div>
            <input value={text} onChange={e => setText(e.target.value)} />
            <ExpensiveChild onClick={handleClick} />
            <p>Clicked {count} times</p>
        </div>
    );
}