Reference

https://reactjs.org/docs/hooks-intro.html

Hooks are now available with the release of v16.8.0.

Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.

Hooks solve a wide variety of seemingly unconnected problems in React that we’ve encountered over five years of writing and maintaining tens of thousands of components. Whether you’re learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.

Let’s start off with everyone’s favorite application. Todos !

https://gitlab.com/sundry/react/todos-react-hooks

import React, { useReducer } from 'react';
import TodosCreate from './TodosCreate';
import TodosList from './TodosList';
import { todosReducer, initialState } from 'reducers/todos';
function Todos() {
const [{ todos }, dispatch] = useReducer(todosReducer, initialState);
const onAddTodo = async todo => {
dispatch({ type: 'addTodo', todo });
};
const onRemoveTodo = async index => {
dispatch({ type: 'removeTodo', index });
};
return (
<>
<TodosCreate onAddTodo={onAddTodo} />
<TodosList todos={todos} onRemoveTodo={onRemoveTodo} />
</>
);
}
export default Todos;

Hooking into the React lifecycle we can use a reducer. Let’s look at this line.

const [{ todos }, dispatch] = useReducer(todosReducer, initialState);

The first variable is our state that our reducer has created, and the second function is how we dispatch actions to our reducer.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Card from 'components/Card/Card';
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit,
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
width: 225,
},
});
function TodosCreate({ onAddTodo, classes }) {
const [todo, setTodo] = useState('');
const onHandleAddToDo = async e => {
e.preventDefault();
onAddTodo({
todo,
date: new Date(),
});
setTodo('');
};
return (
<Card>
<form onSubmit={onHandleAddToDo}>
<Grid
container
justify="center"
alignItems="flex-end"
className={classes.root}
spacing={16}
>
<Grid item>
<TextField
id="todo"
label="What do you need to do today?"
className={classes.textField}
value={todo}
onChange={e => setTodo(e.target.value)}
/>
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
onClick={onHandleAddToDo}
disabled={!todo.length}
>
Add
</Button>
</Grid>
</Grid>
</form>
</Card>
);
}
TodosCreate.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(TodosCreate);

Let’s look closely at the line

const [todo, setTodo] = useState('');

Hooking into the React lifecycle we can use state management like this. The first todo variable is the actual string value of the current todo. The function setTodo can be used to modify the state.

We intend for Hooks to cover all existing use cases for classes, but we will keep supporting class components for the foreseeable future. At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.

Written by

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