JS Fest 2019. Glenn Reyes. With great power comes great React hooks!

With great power comes
great React Hooks!
Glenn Reyes
@glnnrys

Glenn Reyes
👪 🎸 🌎
Freelance JavaScript Engineer
@glnnrys

React.createClass({
mixins: [ReactWindowMixins.OnResize],
const { window } = this.state;
return (
<div>
current window size: {window.width}, {window.height}
</div>
);
}
});

React.createClass({
mixins: [ReactWindowMixins.OnResize], // 🤦🤦🤦🤦🤦🤦🤦
const { window } = this.state;
return (
<div>
current window size: {window.width}, {window.he

class App extends React.Component {
state = { value: '' };
onChange = event => {
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.onChange} />
<p>{this.state.value}</p>
</div>
)
}
}

const App = (props) => {
const greeting = 'Hello';
return <div>{greeting} {props.name}!</div>;
}

How do I add state to
function components?

Container & Presentational
Components

Container & Presentational
Components
DATA UI

class MyData extends React.Component {
}
render() {
return (
<MyUI value={this.state.value} onChange={this.onChange} />
)
}
}
const MyUI = ({ value, onChange }) => (
<div>
<input type="text" value={value} onChange={onChange} />
<p>{value}</p>
</div>
)

}
render() {
return (
)
}
}
const MyUI = ({ value, onChange }) => (
<div>
<p>{value}</p>
</div>
)
}
render() {
return (
)
}
}

const EnhancedComponent = higherOrderComponent(WrappedComponent);

const withInput = Component => class InputContainer extends React.Component {
}
render() {
return (
<Component value={this.state.value} onChange={this.onChange} />
)
}
}
const App = withInput(({ value, onChange }) => (
<div>
<p>{value}</p>
</div>
))

hoc1(hoc2(hoc3(hoc4(Component))))

compose(
hoc1,
hoc2,
hoc3,
hoc4
)(Component)

Thank god Render Props
came around!

class DataProvider extends React.Component {
state = { data: null }
componentDidMount() {
fetchSomeData().then(data => this.setState({ data }));
}
render() {
return this.props.render(data);
}
}
<DataProvider render={data => (
<h1>Hello {data.name}</h1>
)}/>

}
render() {
}
}
)}/>
}
render() {
}
}

}
render() {
}
}
)}/>
 
 
 
 
 
 
 

}
render() {
}
}
)}/>
 
 
 
 
 
 
 
 
 
 
 
 
)}/>

}
render() {
}
}
)}/>
 
 
 
 
 
 
 
 
 
 
 
 
data => (
)

}
render() {
return this.props.children(data);
}
}
<DataProvider>
{data => (
)}
</DataProvider>

https://medium.com/@jackyef/react-hooks-why-we-should-embrace-it-86e408663ad6

Hooks let you use state and other
React features 
without writing a class!

Hooks let you use state and other
React features 
with just function components!

import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

✅ New feature as of React 16.8
✅ Completely opt-in
✅ No breaking changes
✅ Fully backwards compatible

Better reuse and
primitive for stateful logic
between components

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}

class Example extends React.Component {
super(props);
this.state = { count: 0 };
}
}
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}

class FriendStatusWithCounter extends React.Component {
super(props);
this.state = { count: 0, isOnline: null };
this.handleStatusChange = this.handleStatusChange.bind(this);
}
ChatAPI.subscribeToFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
}
componentWillUnmount() {
ChatAPI.unsubscribeFromFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
handleStatusChange(status) {
this.setState({
isOnline: status.isOnline
});
}
// ...

Hooks lets us organize logic
into reusable isolated units

What will happen to React classes?

How will hooks affect the
core concepts of React?

✅ Everything you already know won't change
✅ Hooks provide a more direct API
👉 props
👉 state
👉 context
👉 refs
👉 lifecycle

😄 No more constructor
😄 No more bindings
😄 No more this
😄 Less code
😄 Cleaner code
😓 Learning curve
😓 Bigger React API surface
😓 Not all covered (yet)
😓 There are some rules

☝ Only from React functions
☝ Only on top level

// ------------
// First render
// ------------
useState('Mary') // 1. Initialize name state variable with 'Mary'
useEffect(persistForm) // 2. Add an effect for persisting the form
useState('Poppins') // 3. Initialize surname state variable
useEffect(updateTitle) // 4. Add an effect for updating the title
// -------------
// Second render
// -------------
useState('Mary') // 1. Read name state variable (argument ignored)
useEffect(persistForm) // 2. Replace the effect for persisting the form
useState('Poppins') // 3. Read surname state variable (argument ignored)
useEffect(updateTitle) // 4. Replace the effect for updating the title
// ...

// 🔴 We're breaking the rule by using a Hook in a condition
if (name !== '') {
});
}

useState('Mary') // 1. Read name state variable (argument ignored)
// useEffect(persistForm) // 🔴 This Hook was skipped!
useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state
useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect

// 👍 We're not breaking the first rule anymore
if (name !== '') {
}
});

When to useReducer over
useState?

Start with useState when
building new components

Switch to useReducer on
larger state shapes

eslint-plugin-react-hooks
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",

@glnnrys
🔗 reactjs.org/hooks
🔗 nikgraf.github.io/react-hooks
🔗 github.com/rehooks/awesome-react-hooks
🔗 codesandbox.io/s/github/glennreyes/hooks-demo

Glenn Reyes
@glnnrys
Thank you!
🔗 reactjs.org/hooks
🔗 nikgraf.github.io/react-hooks
🔗 github.com/rehooks/awesome-react-hooks
🔗 codesandbox.io/s/github/glennreyes/hooks-demo

JS Fest 2019. Glenn Reyes. With great power comes great React hooks!

More Related Content

What's hot (19)

Similar to JS Fest 2019. Glenn Reyes. With great power comes great React hooks! (20)

More from JSFestUA (20)

Recently uploaded (20)

JS Fest 2019. Glenn Reyes. With great power comes great React hooks!