react custom hooks

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})