无需重新渲染父组件即可访问子组件数据

Question

I have a parent component which contains a chart, and 2 sliders which define the data that will be used on the chart.

I want the chart to only re-render with the new values from the sliders when the apply button is clicked.

The current problem I have is that if I manage the state of the sliders from the parent, then the parent re-renders every time the sliders change value.

I am looking for a way that I can have the sliders hold their own state, and only re-render the parent component when the apply button is clicked. Does anyone have any suggestions?

function Parent() {
  const useState [slider1Value, setSlider1Value] = useState(0);
  const useState [slider2Value, setSlider2Value] = useState(0);
   return (
     <div>
       <Chart
         value1={slider1Value}
         value2={slider2Value}
       />
       <Slider onChange={setSlider1Value}/>
       <Slider onChange={setSlider2Value}/>
       <button>Apply</button>
     <div>
   );     
}

Answer 1

hmm Probably React.memo is your best bet. Something along like this

function RenderChart(slider1Value, slider2Value){
return (
     <Chart
         value1={slider1Value}
         value2={slider2Value}
       />
)
}

function Parent() {
  const useState [slider1Value, setSlider1Value] = useState(0);
  const useState [slider2Value, setSlider2Value] = useState(0);
  const useState [apply, setApply] = useState(0);
  const renderedChart = useMemo(() => RenderChart(slider1Value, slider2Value), [apply])
   return (
     <div>
        {renderedChart}
       <Slider onChange={setSlider1Value}/>
       <Slider onChange={setSlider2Value}/>
       <button onClick={()=> setApply(true)}>Apply</button>
     <div>
   );     
}

Haven't had time to test but this is how it looks like to me

Another probably (hacky) way is to have a placeholder state that only be populated when you click the apply button.

Answer 2

The best way is to put the slider values into refs, so changing them doesn't re-render the parent, then on button click update a state value which contains the current chart values. Something like this:

import React,  { useCallback, useState, useRef } from 'react';

const Parent = () => {
    const slider1Value = useRef(0);
    const slider2Value = useRef(0);
    
    const setSlider1Value = useCallback((value) => {
        slider1Value.current = value;
    }, []);
    
    const setSlider2Value = useCallback((value) => {
        slider2Value.current = value;
    }, []);
    
    const [chartValues, setChartValues] = useState({ chart1: 0, chart2: 0 });
    
    const updateChartValues = useCallback(() => {
        setChartValues({
            chart1: slider1Value.current,
            chart2: slider2Value.current
        });
    }, []);

    return (
        <div>
            <Chart
                value1={chartValues.chart1}
                value2={chartValues.chart2}
            />
            <Slider onChange={setSlider1Value}/>
            <Slider onChange={setSlider2Value}/>
            <button onClick={updateChartValues}>Apply</button>
        </div>
     );     
}