react custom hooks
import React, { useState, useEffect } from "react";
export default props => {
console.log("componentWillMount");
console.log("componentWillReceiveProps", props);
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [moveCount, setMoveCount] = useState(0);
const [cross, setCross] = useState(0);
const mouseMoveHandler = event => {
setX(event.clientX);
setY(event.clientY);
};
useEffect(() => {
console.log("componentDidMount");
document.addEventListener("mousemove", mouseMoveHandler);
return () => {
console.log("componentWillUnmount");
document.removeEventListener("mousemove", mouseMoveHandler);
};
}, []); // empty-array means don't watch for any updates
useEffect(
() => {
// if (componentDidUpdate & (x or y changed))
setMoveCount(moveCount + 1);
},
[x, y]
);
useEffect(() => {
// if componentDidUpdate or componentDidMount
if (x === y) {
setCross(x);
}
});
return (
<div>
<p style={{ color: props.color }}>
Your mouse is at {x}, {y} position.
</p>
<p>Your mouse has moved {moveCount} times</p>
<p>
X and Y positions were last equal at {cross}, {cross}
</p>
</div>
);
};
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
function LifecycleDemo() {
// It takes a function
useEffect(() => {
// This gets called after every render, by default
// (the first one, and every one after that)
console.log('render!');
// If you want to implement componentWillUnmount,
// return a function from here, and React will call
// it prior to unmounting.
return () => console.log('unmounting...');
}, [ // dependencies to watch = leave blank to run once or you will get a stack overflow ]);
return "I'm a lifecycle demo";
}
function App() {
// Set up a piece of state, just so that we have
// a way to trigger a re-render.
const [random, setRandom] = useState(Math.random());
// Set up another piece of state to keep track of
// whether the LifecycleDemo is shown or hidden
const [mounted, setMounted] = useState(true);
// This function will change the random number,
// and trigger a re-render (in the console,
// you'll see a "render!" from LifecycleDemo)
const reRender = () => setRandom(Math.random());
// This function will unmount and re-mount the
// LifecycleDemo, so you can see its cleanup function
// being called.
const toggle = () => setMounted(!mounted);
return (
<>
<button onClick={reRender}>Re-render</button>
<button onClick={toggle}>Show/Hide LifecycleDemo</button>
{mounted && <LifecycleDemo/>}
</>
);
}
ReactDOM.render(<App/>, document.querySelector('#root'));
import React, { useState } from "react";
// custom hooks useForm
const useForm = callback => {
const [values, setValues] = useState({});
return {
values,
onChange: e => {
setValues({
...values,
[e.target.name]: e.target.value
});
},
onSubmit: e => {
e.preventDefault();
callback();
}
};
};
// app component
export default function App() {
const { values, onChange, onSubmit } = useForm(() => {
console.log(values.username);
console.log(values.email);
});
return (
<div>
<form onSubmit={onSubmit}>
<input type="text" name="username" onChange={onChange} />
<input type="email" name="email" onChange={onChange} />
<input type="submit" value="Sing-in" />
</form>
</div>
);
}
import React, { useState } from 'react';
class WelcomeName extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
function HighHookWelcome() {
const [name ,setName] = useState("Default Name Here");
return(
<WelcomeName
name={name}
/>
);
}
// Note: Didn't need to use state for a static value.
// Minimal example, just to illustrate passing state/props.
// setName is a function to change the name value.