Deep Dive into React Hooks

13/04/2019 reveal.js
localhost:8000/?print-pdf 1/19
REACT HOOKS ⚓REACT HOOKS ⚓Felix Kühl - JobMatchMe GmbH

INTRODUCTION TO HOOKSINTRODUCTION TO HOOKS
statefull component
useState
class NameInput extends React.Component {
constructor(){
state = { name: "Max" }
}
handleChange = (e) => {
this.setState({name: e.target.value})
}
render(){ return <input type="text" onChange={this.handleChange} value={this.state} /> }
}
const NameInput = () => {
const [name, setName] = useState("Max")
const handleChange = (e) => {
setName(e.target.value)
}
return <input type="text" onChange={handleChange} value={name} />
}

WHY USESTATE IS ACUTALLYWHY USESTATE IS ACUTALLY
AWESOMEAWESOME
const Parent = () => {
const [name, setName] = useState()
return <Child setParentState={setName} />
}
const Child = ({setParentState}) => {
const upperCaseMe = () => {
setParentState((state) => state.toUpperCase())
})
return <button onClick={upperCaseMe}>Upper case my name!</button>
}

componentDidMount & componentDidUpdate
class TitleInput extends React.Component {
constructor(){
state = { title: "Hello" }
}
handleChange = (e) => {
this.setState({title: e.target.value})
}
componentDidMount() {
document.title = this.state.title
}
componentDidUpdate() {
document.title = this.state.title
}
render(){ return <input type="text" onChange={this.handleChange} value={this.state.title} /> }
}

useEﬀect
const TitleInput = () => {
const [title, setTitle] = useState("Hello")
const handleChange = (e) => {
setTitle.target.value)
}
useEffect(() => { document.title = title })
return <input type="text" onChange={handleChange} value={title} />
}

componentDidMount
class WidthComponent extends React.Component {
constructor(){
state = { width: window.innerWidth }
}
handleResize = () => {
this.setState({width: window.innerWidth})
}
componentDidMount() {
window.addEventListener('resize', this.handleResize)
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize)
}
render(){ return <p>{this.state.width}</p> }
}

useEﬀect
const WidthComponent = () => {
const [width, setWidth] = useState(window.innerWidth)
const handleResize = () => {
setWidth(window.innerWidth)
}
useEffect(() => {
window.addEventListener('resize', handleResize)
return window.removeEventListener('resize', handleResize)
}, [])
return <p>{width}</p>
}

And what about componentDidUpdate?

And what about componentDidUpdate?
useEffect(() => { if(iMightChange !== null) { doSomething() } }, [iMightChange])

useContext
const Consumer = () => {
const value = useContext()
return (
<Context.Consumer>
{value => <p>Context says {value}</p>}
</Context.Consumer>
)
}
const Consumer = () => {
const value = useContext()
return (
<p>Context says {value}</p>
)
}

useMemo
const memoizedValue = useMemo(() => someExpensiveCalculation(x, y), [x, y]);

REUSE AND COMPOSEREUSE AND COMPOSE
Are hooks kind of like mixins
const MyLocation = () => {
const location = useLocation()
return <p>You are at: {location}</p>
}
const useLocation = () => {
const [location, setLocation] = useState("loading...")
useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(() =>
setLocation("lat: "+position.coords.latitude+" lng: "+position.coords.longitude)
);
} else {
return "Geolocation is not supported by this browser.";
}
})
return location
}

HOOKS IN REAL LIFEHOOKS IN REAL LIFE
Our (old) data provider
/* Context */
const DataContext = React.createContext()
/**
* Global user data provider
*
**/
class DataProvider extends React.Component {
constructor(props) {
super(props)
this.state = {
status: 'init',
data: parseData({}),
actions: {fetchData: this.fetchData}
}
}
/**
* Fetch Data only when we are authenticated. This might not happen on initial mounting
/

... now with hooks! ✨
/* Context */
export const DataContext = React.createContext()
/**
* Data Reducer
*/
const reducer = (state, action) => { ... }
/**
* Global user data provider
*
**/
const DataProvider = props => {
/**
* Fetch Data from API endpoint
*/
const fetchData = async () => { ... }
const [state, dispatch] = useReducer(reducer, {
'i i '

Class vs Hooks
async componentDidMount() {
if (this.props.authState === 'signedIn') {
await this.fetchData()
}
}
async componentDidUpdate(prevProps, prevState) {
if (
prevProps.authState !== this.props.authState &&
this.props.authState === 'signedIn'
) {
await this.fetchData()
}
}
useEffect(() => {
if (props.authState === 'signedIn') {
fetchData()
}
}, [props.authState])

HOOKS UNDER THE HOODHOOKS UNDER THE HOOD
react / packages / react-reconciler / src / ReactFiberHooks.js
// TODO: Not sure if this is the desired semantics, but it's what we
// do for gDSFP. I can't remember why.
if (workInProgressHook.baseUpdate === queue.last) {
workInProgressHook.baseState = newState;
}
...

https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba

State object
State hooks queue
{
foo: 'foo',
bar: 'bar',
baz: 'baz',
}
{
memoizedState: 'foo',
next: {
memoizedState: 'bar',
next: {
memoizedState: 'bar',
next: null
}
}
}

FINAL THOUGHTSFINAL THOUGHTS

Deep Dive into React Hooks

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Deep Dive into React Hooks

Similar to Deep Dive into React Hooks (20)

Recently uploaded

Recently uploaded (20)

Deep Dive into React Hooks