WOW!!! Free WorldWide Shipping 🚀

React Hooks — Should We Be Hooked on Hooks?


An opinion on the advantages of Hooks

“ React Hooks let you use state and React lifecycle features without using class and React component lifecycle methods.”

But, they can be so much more than that…

How Can We Improve This?

This is an example of Dan Abromovs code at React Conf 2018
  • Share reusable behaviors independent of component implementations (like the render prop pattern).
  • Use state, Hook, and component lifecycle events without using a class.
  • Use related logic in one place in your component, rather than splitting it between various lifecycle methods.
import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
constructor() {
super();
this.buttonSubmit = React.createRef();
this.state = {
name: '',
username: '',
formSubmitted: false
};


this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}

componentDidMount(){
this.buttonSubmit.current.addEventListener('click', this.handleSubmit)
console.log("component mounted")
}

componentDidUpdate(){
console.log("component updated")
}

componentWillUnmount(){
this.buttonSubmit.current.EventListener('click', this.handleSubmit)
console.log("component unmounted")
}

handleChange(e){
const {name, value} = e.target
this.setState({...this.state, [name]: value})
}

handleSubmit(){
this.setState({formSubmitted: true})
}

render() {
return (
<div>
{this.state.formSubmitted
? <h1> {this.state.username} has signed in </h1>
: <div>
<input type="text"
name="name"
id="name"
placeholder="name"
value={this.state.name}
onChange={this.handleChange}
/>
<div>
<input type="text"
name="username"
id="username"
placeholder="username"
value={this.state.username}
onChange={this.handleChange}
/>
</div>
<button ref={this.buttonSubmit}>Submit</button>
</div>
}
</div>
);
}
}

render(<Apps />, document.getElementById('root'));
import React, { Component, useState, useRef, useEffect} from 'react';
import { render } from 'react-dom';
const useHandleForm = initialValue => {

const [value, setValue] = useState(initialValue)


const handleChange = (e) => {
const { value } = e.target
setValue(value)
}


return {
value,
onChange: handleChange
}
}

const App = () => {
const name = useHandleForm('');
const username = useHandleForm('');


const [formSubmitted, setFormSubmitted] = useState(false)
const buttonSubmit = useRef()


useEffect(() => {
// This gets called after every render, by default
// (the first one, and every one after that)
buttonSubmit.current.addEventListener('click', handleSubmit) // If you want to implement componentWillUnmount,
// return a function from here, and React will call
// it prior to unmounting.

return () => buttonSubmit.current.removeEventListener('click', handleSubmit);
}, [buttonSubmit])

const handleSubmit = () => {
setFormSubmitted(true);
}

return (
<div>
{this.state.formSubmitted
? <h1> {name.value} has signed in </h1>
: <div>
<input type="text"
name="name"
id="name"
placeholder="name"
{...name}
/>
<div>
<input type="text"
name="username"
id="username"
placeholder="username"
{...username}
/>
</div>
<button ref={this.buttonSubmit}>Submit</button>
</div>
}
</div>
);
}

render(<App />, document.getElementById('root'));

Final Thoughts

We have only scratched the surface on React Hooks here. There are many more built-in Hooks that are worth discovering and are a worthwhile discussion for another time.


Leave a comment


Please note, comments must be approved before they are published