How to Freeze Your Enemy’s React App

Friends,

Today I will tell you how to destroy your rival with the advanced ReactJS technique. The goal of our Machiavellian operation is to freeze their browser. This will render the enemy’s coding attempts fruitless. Or at the very least impede their googling ability for the indefinite period of time. It works especially well with Firefox, because, well, Firefox.

class Vengeance extends React.Component {
    render() {
        return (
            <div>
                <h4>Do you have pets?</h4>
                <select onChange={this.setState({hasPets: true})} defaultValue={true}>
                    <option/>
                    <option value={true}>YES</option>
                    <option value={false}>NO</option>
                </select>
            </div>
        );
    }
}

It’s that simple. The enemy will receive an exponentially growing number of JavaScript errors in their Developer console that they won’t be able to debug anyway because the application will stop responding to any mouse or keyboard input. If you are lucky enough and your opponent uses Firefox, or their laptop is as sluggish as mine, their browser will enter a Ghost Mode (boo!). A condition impossible to resolve even with Apple’s ‘Force quit’ menu. It leads directly to the laptop restart. Brilliant move. Victory attained. Enemy defeated. Game score 1:0. You can thank me later, young Napoleon.

Now, after the enemy is defeated it’s time to teach them a valuable lesson in the winning ReactJS development.

setState(…): Cannot update during an existing state transition (such as within `render` or another component’s constructor).

This is what’s going on under the hoods of our Machiavellian operation. We call setState function immediately, not as onChange handler. It is the same if we would call handleChange like this

<select onChange={this.handleChange()}>

Very easy for our enemy to overlook that we call the actual method. From there it’s only takes a simple React knowledge. Updating the state in the ‘render’ method leads to an infinite loop. Brilliant!

The winning React approach is of course too simple for the enemy to detect and disarm you early on.

class Vengeance extends React.Component {
    handleSelect(e) {
        this.setState({showPets: e.target.value});
    }
    render() {
        return (<div>
            <h4>Do you have pets?</h4>
            <select onChange={this.handleSelect} defaultValue={true}>
                <option/>
                <option value={true}>YES</option>
                <option value={false}>NO</option>
            </select>
        </div>);
    }
}

Or if you are feeling like a hacker today:

<select onChange={this.setState.bind(this, {hasPets:true})} defaultValue={true}>

Either way, it is a triumph. That’s all, sweetpants. May the development force be with you always.

Subscribe to read more awesome articles about web development. If you like what you just read check other fun pieces in this publication too:
#Shitcode Wednesday Ep.1
#Shitcode Wednesday Ep.2
Or tweet me at @ftert.