January 30

Prevent re-renders because of arrow functions v2

Shorter way, maybe hooks will provide something even better

// in render()
<RemoveFieldButton
  fieldId={fieldId}
  removeField={this.removeField}
/>

// outside rendering class
class RemoveEnvironmentButton extends React.PureComponent {
	removeField = () => { this.props.removeField(this.props.ldapLogin); };

	render() {
		return (
			<Button onClick={this.removeField}>
				Remove field
			</Button>
		);
	}
}

January 17

Prevent re-renders because of arrow functions

Old:

// in render()
fields.map(fieldId => <Button onClick={this.removeField(fieldId)} />)

New:

// in render()
<RemoveFieldButton
  fieldId={fieldId}
  removeField={this.removeField}
/>

// outside rendering class
class RemoveEnvironmentButton extends React.PureComponent {
	handleOnClick = () => {
		const { removeField, fieldId } = this.props;

		removeField(fieldId);
	};

	render() {
		return (
			<Button onClick={this.handleOnClick}>
				Remove field
			</Button>
		);
	}
}

ESLint rule to disallow binds in render

"react/jsx-no-bind": [
  1
]

January 9

Code-splitting using React.lazy()

// import
// can make lambda async and use await for things like sleep()
const ComponentName = React.lazy(() => import('./FileNameWithDefaultExport'));


// usage in render
<React.Suspense fallback={<Spin />}>
  <ComponentName />
</React.Suspense>

January 3

position: fixed won’t work when CSS filters are applied in parent

This behaviour is strange, but accords to specification.

SO

January 2

Capturing page snapshot with delay

Put this into console and put your page into state you want to snapshot, before breakpoint triggers.

const delay = 4000;
setTimeout(() => { debugger; }, delay);