React hooks
Wkrótce opisy i więcej hooków.
useState
const [counter, setCounter] = useState(0)
// const handleOnClick = () => setCounter(counter + 1)
const handleOnClick = () => setCounter(prevValue => prevValue + 1)
return (
<div>
<p>{counter}</p>
<button onClick={handleOnClick}>add</button>
</div>
)
useEffect
useEffect(() => {
window.addEventListener('mousemove', handleMouseMove)
return () => {
window.removeEventListener('mousemove', handleMouseMove)
}
}, [rerendercounter])
- Rethinking UI "How React useEffect Hook Works | useEffect" [YT 14:02]
- Jack Herrington "Mastering React's useEffect" [YT 25:19]
- Imamuzzaki Abu Salam "Hello React, Goodbye useEffect (I Hope)"
useRef
const textInput = useRef() // każdy rerender zwraca tę samą referencję
const numberRef = createRef() // tylko do przerendowania
return (
<div>
<input ref={textInput} type="text" />
<input ref={numberRef} type="number" />
//
</div>
)
Odnośniki
- React "Hooks at a Glance"
- Collection of React Hooks
- useHooks(🐠) Easy to understand React Hook recipes by Gabe Ragland
- medium: "The Definitive React Hooks Cheatsheet" | Ohans Emmanuel "React Hooks cheat sheet: Unlock solutions to common problems" | "A somewhat tricky hook usage" | "React Hooks broke my tests, now what? — Part 1" | Daniel Afonso "Hooked on Hooks" | Keke Arif "A Simple Guide to React Context with Hooks" | "A React hook for asynchronous state" | Esteban Herrera "useState in React: A complete guide" | Tim Tan "States and componentDidMount() in functional components with Hooks." | Brian Neville-O'Neill "Use Hooks + Context, not React + Redux" | Simon Trény "Replacing Redux with observables and React Hooks" | "Global state using only React Hooks with the Context API (No Redux)" | Shane BD Delamore "How I Eliminated Redux Boilerplate with Hooks-for-Redux" | Amandeep Singh "How to write 90% cleaner code with Hooks" | Ceci García García "React useEffect Hook" | Justin Travis Waith-Mair "How To Use an IntersectionObserver in a React Hook" | Somnath Musib "Fetch API data using useEffect React hook"
- morioh: Radek From Duomly "React Hooks Tutorial with Examples" | Nina Diana "Making API Calls with React Hooks" | Zara Bryant "How to Replace Redux with React Hooks and the Context API" | Maksim Sudakov "Using the State Hook | Tutorial for Beginners" | Ruben Leija "React useEffect hook with code examples" | wellyshen "React hook for highly-performant and manipulable animations using Web Animations API" (useWebAnimations) | Sveta Slepner "React Hooks: The Difference Between useMemo and useCallback" | Aman Mittal "How to manage state in React apps with useReducer and useContext hooks" | Reinald Reynoso "React Hooks: useState and useEffect"
- javascript.plainenglish.io Naveenkumar M "How to Use ‘useReducer’ and ‘useContext’: React Hooks Tutorial"
- Kent C. Dodds "How to test custom React hooks"
- "Why Isn’t X a Hook?"
- William Kurniawan "Introduction to React Hooks"
- Saransh Kataria "How to write your own custom React hooks"
- "Using Custom React Hooks to Simplify Forms"
- "React Hooks - A deeper dive featuring useContext and useReducer"
- Dmitri Pavlutin "React Controlled Components — the Hooks Way"
- "How to better use react hooks"
- "React Hooks - How to Creat an App with Embedded Analytics"
- school.geekwall.in: "Build a movie search app using React Hooks" | "Build a movie search app using React Hooks" | "Beginner Guide to React Context API with Hook"
- Max Rozen "Stop useEffect from running on every render with useCallback"
- Nordschool: State Management with React Hooks
- Matt Stobbs "By the Hook: A Practical Introduction to React Hooks"
- Ebenezer Don "Use Hooks + Context, not React + Redux"
Youtube
- Playlisty: productioncoder "React Hooks Tutorial | Build Yelp in React with React Hooks | React Hooks tutorial" [YT playlist 33 filmy] | codedamn "React Hooks" [YT playlist 4 filmy] | Rostislav Futornoy "React Hooks for beginners" [YT playlist 8 filmów] | The Muratorium "Using React (Hooks) with D3" [YT playlist 11 filmów] | The Net Ninja "React Context & Hooks Tutorial" [YT playlist 21 filmów] | Classsed "React Hooks Series" [YT playlist 5 filmów] | Codevolution "React Hooks Tutorial" [YT playlist 33 filmy] | Marcin Mokrzan "React Hooks Tutorial" [YT playlist 4 filmy] | Web Dev Simplified "React Hooks" [YT playlist 14 filmów]
- Filmy: freeCodeCamp.org "React Hooks Tutorial - A Crash Course on Styled Components, JSX, React Router, and HOC" [YT 1:55:20] | Academind "React.js Hooks Crash Course" [YT 1:02:54] | Colt Steele "Beginner's Guide to React w/ Hooks (2020) Free Course" [YT 2:18:45] | Traversy Media "Introducing React Hooks" [YT 20:49] | React 16.6 and Hooks [YT 30:47] | Fireship "10 React Hooks Explained // Plus Build your own from Scratch" [YT 13:14] | "Intro to React Hooks Pt. 1: useState (Re-creating a class component)" [YT 13:27] | DevTuts "Creating a Custom React Hook: Use Window Size" [YT 4:43] | Dani Akash "Building nice & reusable custom hooks in React" [YT 38:36] | Harry Wolff "React Hooks: A Complete Introduction" [YT 18:12] | Ben Awad "React Hooks useEffect Tutorial" [YT 20:14] | Harry Wolff "React Hooks: Advanced Hooks" [YT 20:51] | uidotdev "Guide to React's useRef Hook" [YT 10:20] | codeSTACKr "Build A Goal Manager React App w/ Hooks & Airtable API | styled-components | embold.io Code Quality" [YT 36:06] | Bentil Shadrack "React Hooks vs. Redux"