Re-render a child component (React with Hooks)

Question

I have a parent component called "Causes", and a child component called "Graph",

There's a hook called "datas", that is created and updated in "Causes" (parent), and I pass it as props to "Graph" (child).

The first time, everything works, but when I update "datas" in "Causes" (parent), "Graph" (child) still has the old "datas" array of objects.

How can I force the re-render of the child component ?

const [datas, setDatas] = useState([
    { shop: "00h-8h", value: 250, color: "#A2AAC2" },
    { shop: "8h-12h", value: 420, color: "#A2AAC2" },
    { shop: "12h-16h", value: 500, color: "#A2AAC2" },
    { shop: "16h-20h", value: 80, color: "#A2AAC2" },
    { shop: "20h-00h", value: 80, color: "#A2AAC2" }
]);

useEffect(() => {
  setDatas(newArray); <- this updates data, but the component below always got the old datas
}, []);


return (
  <Graph
                  h={400}
                  w={900}
                  data={datas}
                  defaultKeys={["shop", "value"]}
  />
)

Code available here : https://pastebin.com/aLzsz8md

I think this might help you out: https://stackoverflow.com/questions/54843675/componentwillreceiveprops-componentdidupdate-for-react-hook — Maurice Pheyton, Mar 26 '20 at 15:42
need to see how you are creating `newArray` it needs to be a new reference — andy mccullough, Mar 26 '20 at 15:44

score 6 · Answer 1 · answered Mar 26 '20 at 15:47

6

You can solve this problem by adding a key to the Graph component.

<Graph ... key={newKey} />

answered Mar 26 '20 at 15:47

Osman Safak

255
1
5

andy mccullough · Answer 2 · 2020-03-26T15:53:11.467

0

You do not need to force a render of your component, you just need to call setDatas() with some new data. Once you do that, it will rerender Graph with the new data. Make sure you are calling setDatas() with a new array, not just an updated version of the existing datas array, it needs to be a new object reference

At the minute, you are only calling it once, on mount, using the useEffect hook (with no dependencies, denoted by the empty dependency array)

edited Mar 26 '20 at 15:53

answered Mar 26 '20 at 15:49

andy mccullough

9,070
6
32
55

thats what I did, and with some console log I clearly see that datas value changes, but not the child component – VersifiXion Mar 26 '20 at 15:50
can you post up the relevent code, from what you have posted, thats not clear – andy mccullough Mar 26 '20 at 15:51
that's what's weird, i'm doing a few setDatas(newDatas), but the child component always get the datas in the first useState... no possibility to refresh it – VersifiXion Mar 26 '20 at 16:00
have you got SimpleBarChart to see? – andy mccullough Mar 26 '20 at 16:00
my hunch is something in your `shouldComponentUpdate` is not correct. It may be worth debugging in there a little - it's the only thing I can see, though would stop your chart from rerendering, provided in your useEffect logging that you are seeing different data each time, and not the same values – andy mccullough Mar 26 '20 at 16:07
the shouldcomponentupdate returns true if the props.data changes, and false if not, so it looks ok but i'll look further yes – VersifiXion Mar 26 '20 at 16:10

Eddwin Paz · Answer 3 · 2020-03-26T16:32:22.043

you missed the return value on the hook. Please see this implementation.

Hook (updateGraph.js)

const UpdateGraph = () => {

    const [data, setData] = useState([]);

    const fetchData = async () => {
        setData([
            { shop: "00h-8h", value: 250, color: "#A2AAC2" },
            { shop: "8h-12h", value: 420, color: "#A2AAC2" },
            { shop: "12h-16h", value: 500, color: "#A2AAC2" },
            { shop: "16h-20h", value: 80, color: "#A2AAC2" },
            { shop: "20h-00h", value: 80, color: "#A2AAC2" }
        ]);
    };

    useEffect(() => {
        fetchData();
    }, []);

    return [data];

};

export { UpdateGraph };

Implementation (my-component.js)

const { UpdateGraph } from "./UpdateGraph.js" // your path...

const [datas] = UpdateGraph();

return (
    <Graph key={"graph_001"} 
           h={400} w={900} 
           data={datas} 
           defaultKeys={["shop", "value"]} />
);

i dont see what's different here from the OP other than you've split it into two components, plus the Graph component? — andy mccullough, Mar 27 '20 at 08:15

Re-render a child component (React with Hooks)

3 Answers3