Hooks

Implementation — Using the React hooks

UseState:

const App = () => {
const [name, setName] = useState('Jackson');
return(
<input value={name} onChange={(e) => setName(e.target.value)} />
);
}
const App = () => {
const [{name1, name2}, setName] = useState({'Jack', 'Jill'});
return(
<>
<input value={name1} onChange={(e) => setName(currentState => ({
name1: e.target.value,
name2: currentState.name2
})} />
<input value={name1} onChange={(e) => setName(currentState => ({
name1: currentState.name1,
name2: e.target.value
})} />
</>
);
}

UseEffect:

const App = () => {
useEffect(() => {
console.log('name variable changed')
}, [name]);

const [name, setName] = useState('Jackson');
const [name2, setName2] = useState('Jill');
return(
<>
<input value={name} onChange={(e) => setName(e.target.value)} />
<input value={name2} onChange={(e) => setName2(e.target.value)} />
</>
);
}
const App = () => {
useEffect(() => {
console.log('rendering...');

return () => {
console.log('unmounting');
}
}, []);

const [name, setName] = useState('Jackson');
return(
<input value={name} onChange={(e) => setName(e.target.value)} />
);
}

UseRef:

const App = () => {
const [name, setName] = useState('Jackson');
const inputRef = useRef();
return(
<>
<input ref={inputRef} value={name} onChange={(e) => setName(e.target.value)} />
<button onClick={() => inputRef.current.focus()}>focus</button>
</>
);
}
const App = () => {
const [name, setName] = useState('Jackson');
const isMounted = useRef(true);

useEffect(() => {
return () => {
isMounted.current = false;
}
}, [])
return(
<input ref={inputRef} value={name} onChange={(e) => {
isMounted.current && setName(e.target. value);
} />
);
}

UseLayoutEffect:

const App = () => {
const [name, setName] = useState('Jackson');
const [rect, setRect] = useState({});
const inputRef = useRef();

useLayoutEffect(() => {
setRect(inputRef.current.getBoundingClientRect());
}, [])
return(
<>
<pre>{JSON.stringify(rect, null, 2)}</pre>
<input ref={inputRef} value={name} onChange={(e) => setName(e.target.value)} />
</>
);
}

UseCallBack:

const App = () => {
const [count, setCount] = useState(0);

const increment = useCallback(() => {
setCount(c => c+1);
}, [setCount])
return(
<>
<Hello increment={increment} />
<div>count: {count}</div>
</>
);
}

const Hello = React.memo({ increment }) => {
useEffect(() => {
console.log('renders');
});

return <button onClick={increment}>increment</button>
}

UseMemo:

const computeSomethingTedious = (arr) => {
arr.forEach(nextDigit => {
if(Math.square(nextDigit) > 45) {
finalDigit = nextDigit + Math.random(0, nextDigit);
}
})
}

const App = () => {
const finalDigit = 0;
const [count, setCount] = useState(0);
const longestWord = useMemo(() => computeSomethingTedious(data), [finalDigit, computeSomethingTedious])
return(
<>
<div>count: {count}</div>
<button onClick={() => setCount(c => c+1)}>increment</button>
<div>Computed value: {finalDigit} </div>
</>
);
}

UseReducer:

const reducer = (state, action) => {
switch(action.type) {
case 'INCREMENT': return state + 1;
default: return state
}
}

const App = () => {
const [state, dispatch] = useReducer(reducer, 0)
return(
<>
<div>count: {count}</div>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>increment</button>
</>
);
}

UseContext:

import { createContext } from 'react';
export const UserContext = createContext(null);

// App component
import { UserContext } from '../userContext';
const App = () => {
return(
<UserContext.Provider value="Hey, this is context">
<Home />
<About />
</UserContext.Provider>
);
}

// Home component
const Home = () => {
const msg = useContext(UserContext);
return(
<div>Home Message: {msg}</div>
);
}


// About component
const About = () => {
const msg = useContext(UserContext);
return(
<div>About Message: {msg}</div>
);
}

Custom Hooks:

export const useForm = (initialValues) => {
const [values, setValues] = useState(initialValues);

return [values, e => {
setValues({
...values,
[e.target.name]: e.target.value
})
}]
}

Caveats

CODER | BLOGGER | ARTIST | GHOST