Cory House coryhouse

Principal reactjsconsulting.com, Pluralsight Author, Software Architect

coryhouse / immutabilityHelperExample.js

Last active June 11, 2017 19:41

Handling immutable state in React with immutability-helper

	// Import at the top:
	import update from 'immutability-helper';

	updateState({target}) {
	let user = update(this.state.user, {$merge: {[target.name]: target.value}});
	this.setState({user});
	}

coryhouse / objectSpreadExample.js

Last active May 24, 2018 07:30

Using object spread to handle immutable state in React

	updateState(event) {
	const {name, value} = event.target;
	let user = {...this.state.user, [name]: value};
	this.setState({user});
	}

coryhouse / conciseObjectSpreadExample.js

Last active July 17, 2017 17:11

Consise example of object spread in React

	updateState({target}) {
	this.setState({user: {...this.state.user, [target.name]: target.value}});
	}

coryhouse / immutableJsExample.js

Last active July 18, 2022 04:40

Handling React state via Immutable.js map

	// At top, import immutable
	import { Map } from 'immutable';

	// Later, in constructor...
	this.state = {
	// Create an immutable map in state using immutable.js
	user: Map({ firstName: 'Cory', lastName: 'House'})
	};

	updateState({target}) {

coryhouse / brokenReferenceToStateWithoutCallback.js

Last active June 13, 2017 13:56

Example of improperly referencing state immediately after callback

	updateState({target}) {
	this.setState({user: {...this.state.user, [target.name]: target.value}});
	doSomething(this.state.user) // Uh oh, setState merely schedules a state change, so this.state.user may still have old value
	}

coryhouse / callbackFormOfSetState.js

Last active August 23, 2018 14:26

Callback setState example

	updateState({target}) {
	this.setState((prevState) => {
	const updatedUser = {...prevState.user, [target.name]: target.value}; // use previous value in state to build new state...
	return { user: updatedUser }; // And what I return here will be set as the new state
	}, () => this.doSomething(this.state.user); // Now I can safely utilize the new state I've created to call other funcs...
	);
	}

coryhouse / bindingInRender.js

Last active July 5, 2017 15:00

Example of binding in render to pass relevant data to a click handler.

	import React from 'react';

	class App extends React.Component {
	constructor() {
	this.state = {
	users: [
	{ id: 1, name: 'Cory' },
	{ id: 2, name: 'Meg' }
	]
	};

coryhouse / UserListItem.js

Last active July 3, 2017 21:44

Example of extracting a child component to avoid binding in render

	import React from 'react';
	import PropTypes from 'prop-types';

	class UserListItem extends React.Component {
	onDeleteClick = () => {
	// No bind needed since we can compose
	// the relevant data for this item here
	this.props.onClick(this.props.user.id);
	}

coryhouse / callingChildComponentInRender.js

Last active July 7, 2017 07:48

Example of calling extracted child component in render to avoid binding or declaring an arrow function

	import React from 'react';
	import UserListItem from './UserListItem';

	class App extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	users: [
	{ id: 1, name: 'Cory' },
	{ id: 2, name: 'Meg' }

coryhouse / extractedArrowForMapping.js

Created July 10, 2017 12:25

Extract arrow for mapping to separate function

	import React from 'react';
	import { render } from 'react-dom';
	import UserListItem from './UserListItem';

	class App extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	users: [{ id: 1, name: 'Cory' }, { id: 2, name: 'Sherry' }],
	};