1import React, { useState } from "react";
2
3// custom hooks useForm
4const useForm = callback => {
5 const [values, setValues] = useState({});
6 return {
7 values,
8 onChange: e => {
9 setValues({
10 ...values,
11 [e.target.name]: e.target.value
12 });
13 },
14 onSubmit: e => {
15 e.preventDefault();
16 callback();
17 }
18 };
19};
20
21// app component
22export default function App() {
23 const { values, onChange, onSubmit } = useForm(() => {
24 console.log(values.username);
25 console.log(values.email);
26 });
27 return (
28 <div>
29 <form onSubmit={onSubmit}>
30 <input type="text" name="username" onChange={onChange} />
31 <input type="email" name="email" onChange={onChange} />
32 <input type="submit" value="Sing-in" />
33 </form>
34 </div>
35 );
36}
1import React, { useEffect } from 'react';
2
3export const App: React.FC = () => {
4
5 useEffect(() => {
6
7 }, [/*Here can enter some value to call again the content inside useEffect*/])
8
9 return (
10 <div>Use Effect!</div>
11 );
12}
1import React, { useEffect, useState } from 'react';
2import ReactDOM from 'react-dom';
3
4function LifecycleDemo() {
5 // It takes a function
6 useEffect(() => {
7 // This gets called after every render, by default
8 // (the first one, and every one after that)
9 console.log('render!');
10
11 // If you want to implement componentWillUnmount,
12 // return a function from here, and React will call
13 // it prior to unmounting.
14 return () => console.log('unmounting...');
15 }, [ // dependencies to watch = leave blank to run once or you will get a stack overflow ]);
16
17 return "I'm a lifecycle demo";
18}
19
20function App() {
21 // Set up a piece of state, just so that we have
22 // a way to trigger a re-render.
23 const [random, setRandom] = useState(Math.random());
24
25 // Set up another piece of state to keep track of
26 // whether the LifecycleDemo is shown or hidden
27 const [mounted, setMounted] = useState(true);
28
29 // This function will change the random number,
30 // and trigger a re-render (in the console,
31 // you'll see a "render!" from LifecycleDemo)
32 const reRender = () => setRandom(Math.random());
33
34 // This function will unmount and re-mount the
35 // LifecycleDemo, so you can see its cleanup function
36 // being called.
37 const toggle = () => setMounted(!mounted);
38
39 return (
40 <>
41 <button onClick={reRender}>Re-render</button>
42 <button onClick={toggle}>Show/Hide LifecycleDemo</button>
43 {mounted && <LifecycleDemo/>}
44 </>
45 );
46}
47
48ReactDOM.render(<App/>, document.querySelector('#root'));
1import React, { useState, useEffect } from "react";
2export default props => {
3 console.log("componentWillMount");
4 console.log("componentWillReceiveProps", props);
5 const [x, setX] = useState(0);
6 const [y, setY] = useState(0);
7 const [moveCount, setMoveCount] = useState(0);
8 const [cross, setCross] = useState(0);
9 const mouseMoveHandler = event => {
10 setX(event.clientX);
11 setY(event.clientY);
12 };
13 useEffect(() => {
14 console.log("componentDidMount");
15 document.addEventListener("mousemove", mouseMoveHandler);
16 return () => {
17 console.log("componentWillUnmount");
18 document.removeEventListener("mousemove", mouseMoveHandler);
19 };
20 }, []); // empty-array means don't watch for any updates
21 useEffect(
22 () => {
23 // if (componentDidUpdate & (x or y changed))
24 setMoveCount(moveCount + 1);
25 },
26 [x, y]
27 );
28useEffect(() => {
29 // if componentDidUpdate or componentDidMount
30 if (x === y) {
31 setCross(x);
32 }
33 });
34 return (
35 <div>
36 <p style={{ color: props.color }}>
37 Your mouse is at {x}, {y} position.
38 </p>
39 <p>Your mouse has moved {moveCount} times</p>
40 <p>
41 X and Y positions were last equal at {cross}, {cross}
42 </p>
43 </div>
44 );
45};
1//Go to https://www.30secondsofcode.org/react/ for most commonly
2//used custom hooks and components
1// custom useMethods Hooks
2export const useMethod = (props) => {
3 const keys = Object.keys(props.methods)
4 const methods = {}
5 for (let i in keys) {
6 Object.defineProperties(methods, {
7 [keys[i]]: {
8 value: props.methods[keys[i]],
9 writable: true,
10 enumerable: true
11 }
12 })
13 }
14 return methods
15}
16
17// call custom hooks useMethod like this
18const handler = useMethod({
19 methods: {
20 increment() {
21 setIncrement(increment + 1)
22 },
23 decrement() {
24 setDecrement(decrement - 1)
25 }
26 }
27})
28
29// call custom hooks userMethod with useCallback
30const [increment, setIncrement] = useState(0)
31const [decrement, setDecrement] = useState(0)
32
33const handler = useMethod({
34 methods: {
35 increment: useCallback(() => setIncrement(increment + 1), [increment]),
36 decrement: useCallback(() => setDecrement(decrement - 1), [decrement])
37 }
38})