revirth / what-is-hooks

Hooks

• Introducing Hooks
• useHooks
• https://velog.io/@velopert/react-hooks

useState returns a stateful value, and a function to update it

• Lazy initial state

• what-is-hooks/tutorial/src/App.js

  Line 11 in 8f8f8b9

  const [visible, setVisible] = useState(true);

useEffect will run after the render is committed to the screen

• what-is-hooks/tutorial/src/Info.js

  Line 11 in 8f8f8b9

  useEffect(() => {

useContext accepts a context object (the value returned from React.createContext) and returns the current context value for that context

useReducer accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method

• what-is-hooks/tutorial/src/Counter.Reducer.js

  Line 21 in 8f8f8b9

  const [state, dispatch] = useReducer(reducer, { value: 0 });

useMemo will only recompute the memoized value when one of the dependencies has changed

• what-is-hooks/tutorial/src/Average.js

  Line 28 in 8f8f8b9

  const avg = useMemo(() => getAverage(list), [list]);

useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed

• what-is-hooks/tutorial/src/Average.Callback.js

  Line 17 in 8f8f8b9

  const onChange = useCallback(e => {

useRef

• what-is-hooks/tutorial/src/Average.Callback.js

  Line 14 in 8f8f8b9

  const inputEl = useRef(null);

custom hooks

• what-is-hooks/tutorial/src/Info.Reducer.js

  Line 5 in 8f8f8b9

  const [state, onChange] = useInputs({ name: "", nickname: "" });

• https://github.com/rehooks/awesome-react-hooks

refs

• https://github.com/streamich/react-use
• https://usehooks.com/useDarkMode/
• https://usehooks.com/useLocalStorage/
• https://usehooks.com/useTheme/
• https://usehooks.com/useHover/