React
by Abdul Ahmad
HTML
<div id="app"></div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
.done {
color: rgba(0, 0, 0, 0.3);
text-decoration: line-through;
}
input {
margin-right: 5px;
}
React
function App() {
const [st, setSt] = React.useState(0);
const { val } = useHook({ deps: [st] });
function incrementVal() {
return st + 1;
}
React.useEffect(() => {
setTimeout(() => {
setSt(st +);
}, 1000);
}, [st]);
return 'hi';
}
function useHook({ deps } = {}) {
React.useEffect(() => {
console.log('deps: ', deps);
}, [...deps]);
return { val: '' };
}
ReactDOM.render(<App />, document.querySelector("#app"))