React Hooks Cheatsheet
useState Hook
useState to Create State Variables
import "./styles.css";
import React from 'react';
export default function App() {
const [language] = React.useState('React!!!')
return <h1>I am learning {language}</h1>;
}
Update State Variables
import "./styles.css";
import React from 'react';
export default function App() {
const [language, setLanguage] = React.useState('React!!!')
function changeLanguage() {
setLanguage('React Hooks')
}
return <h1 onClick={changeLanguage}>I am learning {language}</h1>;
}
Can Be Used Once Or Many Times
import "./styles.css";
import React from "react";
export default function App() {
const [language, setLanguage] = React.useState("React!!!");
const [years] = React.useState(0);
function changeLanguage() {
setLanguage("React Hooks");
}
React Hooks Cheatsheet 1
return (
<div>
<h1 onClick={changeLanguage}>
I've learned {language} for {years} years
</h1>
<button>Add Year</button>
</div>
);
}
Update State based on Previous Value
import "./styles.css";
import React from "react";
export default function App() {
const [language, setLanguage] = React.useState("React!!!");
const [years, setYears] = React.useState(0);
function changeLanguage() {
setLanguage("React Hooks");
}
function addYear() {
setYears(prev => prev + 1)
}
return (
<div>
<h1 onClick={changeLanguage}>
I've learned {language} for {years} years
</h1>
<button onClick={addYear}>Add Year</button>
</div>
);
}
Manage State with an Object
import "./styles.css";
import React from "react";
export default function App() {
// const [language, setLanguage] = React.useState("React!!!");
// const [years, setYears] = React.useState(0);
const [state, setState] = React.useState({
language: "React",
years: 0
React Hooks Cheatsheet 2
})
function changeLanguage() {
setState({...state, language: "React Hooks"});
}
function addYear() {
setState(prev => {
return {
...prev,
years: prev.years + 1
}
})
}
return (
<div>
<h1 onClick={changeLanguage}>
I've learned {state.language} for {state.years} years
</h1>
<button onClick={addYear}>Add Year</button>
</div>
);
}
useEffect Hook
useEffect to Perform Side Effects
import "./styles.css";
import React from "react";
export default function App() {
React.useEffect(() => {
document.body.style.background = 'navy';
document.body.style.color = 'white';
})
return (
<div>
<h1>React App</h1>
</div>
);
}
Run Again when a Value Changes
React Hooks Cheatsheet 3
import "./styles.css";
import React from "react";
export default function App() {
const [color, setColor] = React.useState('navy')
React.useEffect(() => {
document.body.style.background = color;
document.body.style.color = 'white';
}, [color]);
function changeColor() {
setColor('gold')
}
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>Change color</button>
</div>
);
}
Unsubscribe by Returning a Function
import "./styles.css";
import React from "react";
export default function App() {
const [color, setColor] = React.useState('navy')
React.useEffect(() => {
document.body.style.background = color;
document.body.style.color = 'white';
window.addEventListener('keydown', handleEnterButton)
return () => {
window.removeEventListener('keydown', handleEnterButton)
}
}, [color]);
function changeColor() {
setColor('gold')
}
function handleEnterButton(event) {
if (event.keyCode === 13) {
setColor('red')
React Hooks Cheatsheet 4
}
}
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>Get color</button>
</div>
);
}
Fetch Data from an API
import "./styles.css";
import React from "react";
export default function App() {
const [color, setColor] = React.useState('navy')
const [user, setUser] = React.useState(null)
React.useEffect(() => {
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(data => setUser(data.results[0]))
}, [])
React.useEffect(() => {
document.body.style.background = color;
document.body.style.color = 'white';
window.addEventListener('keydown', handleEnterButton)
return () => {
window.removeEventListener('keydown', handleEnterButton)
}
}, [color]);
function changeColor() {
setColor('gold')
}
function handleEnterButton(event) {
if (event.keyCode === 13) {
setColor('red')
}
}
return (
<div>
<h1>React App</h1>
<button onClick={changeColor}>Get color</button>
React Hooks Cheatsheet 5
<br />
<br />
Current user: <pre>{JSON.stringify(user, null, 2)}</pre>
</div>
);
}
useRef Hook
useRef to Reference React Elements
import './styles.css'
import React from 'react';
export default function App() {
const inputRef = React.useRef(null)
function handleClearInput() {
inputRef.current.value = "";
inputRef.current.focus();
}
return (
<form>
<input
type="text"
ref={inputRef}
/>
<button type="button" onClick={handleClearInput}>
Clear Input
</button>
</form>
);
}
useCallback Hook
useCallback Prevents Callbacks from Being Recreated
import './styles.css'
import React from 'react';
export default function App() {
const [skill, setSkill] = React.useState("");
const [skills, setSkills] = React.useState(["HTML", "CSS", "JavaScript"]);
React Hooks Cheatsheet 6
function handleChangeInput(event) {
setSkill(event.target.value);
}
function handleAddSkill() {
setSkills(skills.concat(skill));
}
const handleRemoveSkill = React.useCallback((skill) => {
setSkills(skills.filter((s) => s !== skill));
}, [skills])
return (
<>
<input onChange={handleChangeInput} />
<button onClick={handleAddSkill}>Add Skill</button>
<SkillList skills={skills} handleRemoveSkill={handleRemoveSkill} />
</>
);
}
const SkillList = React.memo(({ skills, handleRemoveSkill }) => {
console.log('re-rendered whenever parent state is updated!')
return (
<ul>
{skills.map((skill) => (
<li key={skill} onClick={() => handleRemoveSkill(skill)}>
{skill}
</li>
))}
</ul>
);
});
useMemo Hook
useMemo Can Improve Expensive Operations
import './styles.css'
import React from 'react';
const skills = ["HTML", "CSS", "JavaScript", '...1000s more']
export default function App() {
const [searchTerm, setSearchTerm] = React.useState("");
const searchResults = React.useMemo(() => {
return skills.filter(s => s.includes(searchTerm));
}, [searchTerm])
React Hooks Cheatsheet 7
function handleSearchInput(event) {
setSearchTerm(event.target.value);
}
return (
<>
<h3>Search Results</h3>
<input onChange={handleSearchInput} />
<ul>
{searchResults.map((result, i) => (
<li key={i}>{result}</li>
))}
</ul>
</>
);
}
useContext Hook
useContext Helps Us Avoid Prop Drilling
import './styles.css'
import React from 'react';
const UserContext = React.createContext()
export default function App() {
const [user] = React.useState({ name: "Fred" });
return (
<UserContext.Provider value={user}>
<Main />
</UserContext.Provider>
);
}
const Main = () => (
<>
<Header />
<br />
<div>Main app content</div>
</>
);
const Header = () => {
const user = React.useContext(UserContext)
return <h1>Welcome, {user.name}!</h1>;
}
React Hooks Cheatsheet 8
useReducer Hook
useReducer is Another) Powerful State Management Tool
export default function App() {
const [state, dispatch] = React.useReducer(reducer, initialState)
function handleLogin() {
dispatch({
type: "LOGIN",
payload: {
username: "Reed"
}
})
}
function handleSignout() {
dispatch({
type: "SIGNOUT"
})
}
return (
<>
Current user: {state.username}
<br />
isAuthenticated: {JSON.stringify(state.isAuth)}
<br />
<button onClick={handleLogin}>Login</button>
<button onClick={handleSignout}>Signout</button>
</>
);
}
React Hooks Cheatsheet 9
