Before diving into the problems, be sure to be familiar with useState, useEffect, useMemo, useCallback and useRef hooks at least. Read about hooks
Be sure to know:
- That if you pass a function to
useStatehook, it will be called only once and its return value will be default value of state - That if you pass a function to setState returned by
useState, its first argument will be the old value of a state and the return value will become the next value. You can use this for optimizations (by avoiding extra dependency for useMemo or other hooks) - The difference when you pass dependencies array to
useEffectand when you don't. - About the returned function from
useEffect. - About rules of using hooks
Statement
Write custom hook without using useCallback which behaves exactly like useCallback.
Statement
Write custom hook that accepts a function fn and:
馃敼 Returns a function outFn, which is not changed on re-renders
馃敼 outFn should behave exactly like latest fn
馃敻 Do not use useCallback hook
In other words, you are required to write custom hook similar to useCallback which does not need dependencies array and has same (or even better) performance benefits.
Statement
Write custom hook without using useState which behaves exactly like useState.
Be sure that:
馃敼 It can accept default value as well as a function which returns default value
馃敼 Second element of returned array (setState) can accept new value as well as function that receives old value and returns new value
馃敼 Make sure that setState stays the same function and is not changed on re-renders
馃敻 You can use useReducer hook only for re-rendering purpose
Hint
We provide useForceUpdate custom hook as a helper for re-rendering.
const useForceUpdate = () => {
const [, forceUpdate] = useReducer(x => x + 1, 0);
return forceUpdate;
}Statement
Write custom hook without using useRef which behaves exactly like useRef.
Statement
Write custom hook without using neither useMemo nor useCallback which behaves exactly like useMemo.
Statement
Write higher order function which:
馃敼 Accepts function compareFn as a sole parameter.
compareFn itself accepts two arrays as parameters and returns a boolean - whether every element of arrays on same indexes are equal or not. It can use simple shallow equality, deep equality or even custom. The implementation of compareFn is not important for us anyway.
馃敼 Returns custom hook which behaves like useMemo with the difference that the equality of old and new dependencies must be checked by compareFn function.
馃敼 Does not use neither useMemo nor useCallback