{ Don't Forget React Memo }

Previously on 

React Conf

But before we start ...

 

Understand that this  is not the near future

😵‍💫

💭

useMemo === useCallback 
memorization  

overusing useMemo 
solid understanding 
figure out best practices

👋🏻

Khrystyna Landvytovych
FE engineer, SoftServe

💊

 Approve  

Simplify

Customise your useMemo

1.  plain JavaScript object

2. value can be accessed, modified

3. should be persist

Our first steps

🤓

// useState returns an array. Index zero is the current value

const ref = useState({ current: initialValue })[0]

# PRESENTING CODE

useRef?

🤨

Recompute the memoized value only when one of the dependencies has changed

Shallow Compare

🧐

const shallowEquals = (prevDeps, currentDeps) => {
  if (!Array.isArray(prevDeps) || !Array.isArray(currentDeps)) {
    return false;
  }

  if (prevDeps.length !== currentDeps.length) {
    return false;
  }

 
  for(item of prevDeps) {
    if (!Object.is(prevDeps[item], currentDeps[item])) {
      return false;
    }
  }

  return true;
};


const useMyMemo = (create, dependencies) => {
  const val = useRef(create());
  const prevDependencies = useRef([]);

  if (!shallowEquals(dependencies, prevDependencies.current)) {
    val.current = create();
    prevDependencies.current = [...dependencies];
  }
  return val;

};
# PRESENTING CODE

1

Customise useRef by useState

2

 

useMemo similar to useRef

3

Combine useRef with auto-update functionality

4

What about useCallBack

useCallback((e) => onClick(id, e.target.value), [onClick, id]);

// is equivalent to

useMemo(() => (e) => onClick(id, e.target.value), [onClick, id]);

Bonus part

😏

# PRESENTING CODE
const ChildComponent = React.memo(({
		filterData
	}) {
	console.log('child rendering ...')
	return < > ChildStuff < />
})

const ParentComponent = () => {
	const filterData = () => {
      // do something 
    }
    
	const handleClick = useCallback(filterData, [])
    
	return <ChildComponent filterData = {
		handleClick
	}
	/>
}
# PRESENTING CODE
const useSlide = (defaultSlideIndex = 1) => {
  const [slideIndex, setSlideIndex] = useState(defaultSlideIndex);

  const nextSlide = useCallback(() => {
   ...
  }, [slideIndex]);

  const prevSlide = useCallback(() => {
   ...
  }, [slideIndex]);

   useEffect(async () => {
     const dataSlider = await fetchData();
    // maybe fetch from API and then pass data to slideIndex
    setSlideIndex(dataSlider.length)
  }, [slideIndex])

  return { nextSlide, prevSlide, slideIndex };
};

Stay with 🇺🇦

@croftyland

Made with Slides.com