Interview questions

DangerButton.jsx

// How to optimize this component?
class DangerButton extends PureComponent {
    handleClick() {
        throw new Error('I warned you!');
    }

    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>
                {"Don't press me!"}
            </button>
        );
    }
}

incrementAll.js

// How to optimize this function?
function incrementAll(list, options) {
    return list.map((value) => {
        value += options.add;
        value *= options.multiply;
        return value;
    });
}

InputField.jsx

// How to optimize this component?
const InputField = ({ name, pattern, value }) => {
    const [currentValue, setValue] = useState(value);

    const handleChange = useCallback((event) => {
        setValue(event.target.value);
    });

    return (
        <>
            <input name={name} value={currentValue} onChange={handleChange} />
            {currentValue && !pattern.test(currentValue) && (
                <div>
                    This is wrong, please change it.
                </div>
            )}
        </>
    );
}

LuckyButton.jsx

// How to optimize this component?
const LuckyButton = ({ value }) => ({
    <button onClick={() => alert(`Your lucky number is ${value}`)}>
        Press me!
    </button>
});