Fixing the callback hell of over-parenting with React

<Task
task={task}
onTaskComplete={this.onTaskComplete}
onTaskDelete={this.onTaskDelete}
onTaskSchedule={this.onTaskSchedule}
/>
<Subtask
subtask={task.subtask}
onSubtaskComplete={this.props.onTaskComplete}
onSubtaskDelete={this.props.onTaskDelete}
onSubtaskSchedule={this.props.onTaskSchedule}
/>
/* BEFORE */
class TaskList extends React.Component {
constructor(props) {
super(props);
this.onTaskComplete = this.onTaskComplete.bind(this);
this.onTaskDelete = this.onTaskDelete.bind(this);
this.onTaskSchedule = this.onTaskSchedule.bind(this);
}
onTaskComplete() { /* completing stuff */ }
onTaskDelete() { /* deleting stuff */ }
onTaskSchedule() { /* scheduling stuff */ }

render() {
const { tasks } = this.props;

return tasks.map(task => (
<Task
task={task}
onTaskComplete={this.onTaskComplete}
onTaskDelete={this.onTaskDelete}
onTaskSchedule={this.onTaskSchedule}
/>
));
}
}
/* AFTER */
class TaskList extends React.Component {
constructor(props) {
super(props);
}
onTaskComplete() { /* completing stuff */ }
onTaskDelete() { /* deleting stuff */ }
onTaskSchedule() { /* scheduling stuff */ }
render() {
const { tasks } = this.props;
return tasks.map(task => (
<Task
task={task}
delegate={this}
/>
));
}
}
import { setupDelegate } from 'react-delegate';
class Task extends React.Component {
constructor(props) {
super(props);
setupDelegate(this, 'onTaskComplete', 'onTaskDelete', 'onTaskSchedule');
}
render() {
const { task } = this.props;
return (
<div onClick={this.onTaskComplete}>
{task.title}
</div>
)
}
}
/* BEFORE */ #boring
import { setupDelegate } from 'react-delegate';
class Task extends React.Component {
constructor(props) {
super(props);
setupDelegate(this, 'onTaskComplete');
}
onClick(){
this.onTaskComplete(this.props.task.id);
}
render() {
const { task } = this.props;
return (
<div onClick={this.onClick}>
{task.title}
</div>
)
}
}
/* AFTER */ #awesome
import { setupDelegate } from 'react-delegate';
class Task extends React.Component {
constructor(props) {
super(props);
setupDelegate(this, 'onTaskComplete');
}
render() {
const { task } = this.props;
return (
<div onClick={this.onTaskCompleteCached(task.id)}>
{task.title}
</div>
)
}
}

--

--

--

Danish entrepreneur @tornoe. CEO @swipesapp.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting started with Cypress.io!

Introduction to React Hooks

Expo, React native… on boarding chatbot : Part three

Build a Serverless Leaderboard API At Edge using Cloudflare Workers and Redis

JavaScript Algorithm: Square Every Digit

How to Make Your Very Own Express Middleware

Most commonly used Express Middleware functions

Angular Debugging Guides

Angular Error Messages

DESTRUCTURING ARRAYS IN JS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kasper Pihl Tornøe

Kasper Pihl Tornøe

Danish entrepreneur @tornoe. CEO @swipesapp.

More from Medium

Shrink.media | Made with React JS

ReactJS VS React Native: Key Differences

How to Customize the React TreeView Component

What Exactly is React Js?