How to change child state from another child without re-rendering parent

Question

I want to change the content of a child component in response to a user event in another child component without causing the parent to re-render.

I've tried storing the child state setter to a variable in the parent but it is not defined by the time the children have all rendered, so it doesn't work.

Is there a minimal way to accomplish this (without installing a state management library)?

ChildToChild.tsx

import React, {
  Dispatch,
  SetStateAction,
  useEffect,
  useRef,
  useState,
} from "react";

export default function ChildToChild() {
  const renderCounter = useRef(0);
  renderCounter.current = renderCounter.current + 1;

  let setChildOneContent;
  const childOneContentController = (
    setter: Dispatch>
  ) => {
    setChildOneContent = setter;
  };

  return (
    
      Don't re-render me please
      No. Renders: {renderCounter.current}
      
      
    
  );
}

function ChildOne({
  childOneContentController,
}: {
  childOneContentController: (setter: Dispatch>) => void;
}) {
  const [content, setContent] = useState("original content");

  useEffect(() => {
    childOneContentController(setContent);
  }, [childOneContentController, setContent]);

  return (
    
      Child One
      {content}
    
  );
}

function ChildTwo({
  setChildOneContent,
}: {
  setChildOneContent: Dispatch> | undefined;
}) {
  return (
    
      Child Two
      
    
  );
}

user_8138192 · Answer

You should be able to achieve by

Using state in child components
Using a callback function in the parent component that calls the setState function of the child component. This will trigger re-render of the child but not of itself (parent).

Demo: https://codesandbox.io/s/child-re-rendering-only-x37ol

user_14815966 · Answer

For an one-off, you could use the following (another ref to store & use the ChildOne setContent:

import React, {
  Dispatch,
  SetStateAction,
  useEffect,
  useRef,
  useState
} from "react";

function ChildOne({
  setChildOneRef
}: {
  setChildOneRef: React.MutableRefObject
  > | null>;
}) {
  const [content, setContent] = useState("original content");

  useEffect(() => {
    setChildOneRef.current = setContent;
  }, [setChildOneRef]);

  return (
    
      Child One
      {content}
    
  );
}

function ChildTwo({
  setChildOneRef
}: {
  setChildOneRef: React.MutableRefObject
  > | null>;
}) {
  return (
    
      Child Two
      
    
  );
}

export function ChildToChild() {
  const renderCounter = useRef(0);
  renderCounter.current = renderCounter.current + 1;

  const setChildOneRef = useRef> | null>(null);
  return (
    
      Don't re-render me please
      No. Renders: {renderCounter.current}
      
      
    
  );
}

If this pattern is common in your code, you may still want to use state management library or evaluate if "childs" should be really separated.

user_2635009 · Answer

You can create an object, store the hook on that object, and use the hook from the object on the children. Not sure why the output count increments twice...

import { useState } from "react";

let parentRenderCount = 0;
let child1RenderCount = 0;
let child2RenderCount = 0;

const Child1 = ( { stateHolder } ) => {
    const [count, setCount] = useState( 0 )
    console.log('child1 render', ++child1RenderCount)
    stateHolder.count = count
    stateHolder.setCount = setCount
    return 
        {count}
    
}

const Child2 = ( { stateHolder } ) => {
    console.log('child2 render', ++child2RenderCount)
    return 
}


function App() {
    const stateHolder = { }
    console.log('parent render', ++parentRenderCount)
    return (
        
            
            
        
    );
}

export default App;

user_17254077 · Answer

The event could be propagated over the RxJS Subject, with value if it is needed.

// in parent

// const subject = new rxjs.Subject();
const subject = { // or create lightweight alternative
  nextHandlers: [],
  next: function(value) {
    this.nextHandlers.forEach(handler => handler(value));
  },
  subscribe: function(nextHandler) {
    this.nextHandlers.push(nextHandler);
    return { 
      unsubscribe: () => {
        this.nextHandlers.splice(
          this.nextHandlers.indexOf(nextHandler),
          1
        );
      }
    };
  }
};

// provide next method to the childOne
onClick={value => subject.next(value)}

// provide subscribe method to the childTwo
subscribeOnClick={(nextHandler) => subject.subscribe(nextHandler)}

// in childTwo
useEffect(() => {
  const subscription = subscribeOnClick(value => setContent(value));
  return () => subscription.unsubscribe();
}, [subscribeOnClick]);

user_438273 · Answer

You can store the Dispatch> function in a ref in the parent:

import ReactDOM from 'react-dom';

import {
  Dispatch,
  MutableRefObject,
  ReactElement,
  SetStateAction,
  useEffect,
  useRef,
  useState,
} from 'react';

type ChildProps = {
  setValueRef: MutableRefObject> | undefined>;
};

function Child1 (props: ChildProps): ReactElement {
  const [dateString, setDateString] = useState(new Date().toISOString());

  useEffect(() => {
    props.setValueRef.current = setDateString;
  }, [props.setValueRef, setDateString]);

  return {dateString};
}

function Child2 (props: ChildProps): ReactElement {
  const handleClick = (): void => {
    props.setValueRef.current?.(new Date().toISOString());
  };

  return ;
}

function Parent (): ReactElement {
  const setValueRef = useRef> | undefined>();
  const renderCountRef = useRef(0);
  renderCountRef.current += 1;

  return (
    
      Render count: {renderCountRef.current}
      
      
    
  );
}

ReactDOM.render(, document.getElementById('root'));

Here's the same code in a runnable snippet (with types erased and import statements converted to use the UMD version of React):

That being said, this is a strange pattern, and the scenario can be solved idiomatically using React.memo (this is the case it's designed for).

How to change child state from another child without re-rendering parent

5 Answers