Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Implement shouldComponentUpdate with React hooks - Render child only once, but make DOM changes when props change

Ask Question

I have something working with a React.Component using shouldComponentUpdate, and want to convert it to use React Hooks, but I'm not sure it's even possible.

I have a child component that renders a very expensive ChartingLibrary canvas, so I only want to render the Child react component once.

The charting canvas content is dependent on props passed to the Child and certain apis on the ChartingLibrary have to be called with the props passed to the child.

So when the props passed to the child changes, I need to call apis on the Charting Library, but I don't want to refresh the Child component.

This is working with a React Class as follows:

const Parent = () => { <Child/> export class Child extends React.Component { shouldComponentUpdate (nextProps, nextState) { ChartingLibrary.init() ChartingLibrary.doStuffWithProps(nextProps.data) return false

React.memo is problematic:

The closest I can get to the React.Component version is with React.Memo, but I don't have access to the ChartingLibrary from inside the isSame function. React. The React.Component version gives me access to ChartingLibrary from inside the component whereas React.memo can only be done from outside the component.

const Parent = () => { <Child/> const Child = (props) => { ChartingLibrary.init() ChartingLibrary.doStuffWithProps(props) const ChildMemo = React.memo(Child, function isSame (prevProps, props) { ChartingLibrary.doStuffWithProps(props) return true

Is there a better way? Is what I'm trying to do possible with hooks?

Please provide a producible example, it doesn't make sense that doChartingLibraryWithProps is not in scope, where does it come from? Your examples aren't clear. Any sandbox will be great. – Dennis Vash Feb 2, 2020 at 16:20 @DennisVash thanks for your comments, I have clarified substantially now. I feel like this is a theoretical / architectural question, so don't see value in producing a working sample. – iKode Feb 2, 2020 at 17:46 First I want to say that everything (99.5%) that is possible with classes is possible with hooks, but still, I don't understand the question, you can simulate an example in a sandbox and you don't need the actual library for it, the code above doesn't make sense to me at all, feel free to tag me if you update the question with actual examples. – Dennis Vash Feb 2, 2020 at 17:51

You are doing it the right way i guess. React.memo is the way you can achieve what you are looking for.

function MyComponent(props) {
  /* render using props */
function areEqual(prevProps, nextProps) {
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
export default React.memo(MyComponent, areEqual);
As said in the documentation:
  
Unlike the shouldComponentUpdate() method on class components, the
  areEqual function returns true if the props are equal and false if the
  props are not equal. This is the inverse from shouldComponentUpdate.
Hope this will help you.
Thank you @Muhammad Zeeshan, I needed that to only animate a text field (RN) when the props changed:
import React, { useEffect, useRef } from 'react';
import { Animated } from 'react-native';
const AnimatedView = props => {
  const animatedOpacity = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    Animated.sequence(
        Animated.timing(animatedOpacity, {
          toValue: 0,
          duration: 500,
          useNativeDriver: true
        Animated.timing(animatedOpacity, {
          toValue: 1,
          duration: 0,
          useNativeDriver: true
      { useNativeDriver: true }
    ).start();
  }, [props.children]);
  return (
    <Animated.Text
      style={{
        opacity: animatedOpacity
      {props.children}
    </Animated.Text>
const comparator = (prevProps, nextProps) => {
  if (prevProps.children !== nextProps.children) {
    return true;
  return false;
export default React.memo(AnimatedView, comparator);
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.