1/*
2 A common use case is to access a child imperatively:
3*/
4
5function TextInputWithFocusButton() {
6 const inputEl = useRef(null);
7 const onButtonClick = () => {
8 // `current` points to the mounted text input element
9 inputEl.current.focus();
10 };
11 return (
12 <>
13 <input ref={inputEl} type="text" />
14 <button onClick={onButtonClick}>Focus the input</button>
15 </>
16 );
17}
1// They both take a function and an array of dependencies:
2
3useCallback(() => {···}, [dependency1, dependency2]);
4useMemo(() => {···}, [dependency1, dependency2]);
5
6// So what is the difference?
7
8// useCallback returns its function uncalled so you can call it later
9// therefore, it gives you back the function's reference
10
11// useMemo calls its function and returns the result.
12// therefore, it gives you back the function's return value
13
1const memoizedCallback = useCallback(
2 () => {
3 doSomething(a, b);
4 },
5 [a, b],
6);