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: stackoverflow.com/questions/54843675/… — Maurice Pheyton
– Maurice Pheyton, Commented Mar 26, 2020 at 15:42
need to see how you are creating newArray it needs to be a new reference — andy mccullough
– andy mccullough, Commented Mar 26, 2020 at 15:44

Osman Safak · Accepted Answer · 2020-03-26 15:47:51Z

6

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

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

answered Mar 26, 2020 at 15:47

Osman Safak

2551 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andy mccullough · Accepted Answer · 2020-03-26 15:53:11Z

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, 2020 at 15:53

answered Mar 26, 2020 at 15:49

andy mccullough

9,6817 gold badges38 silver badges64 bronze badges

6 Comments

VersifiXion Over a year ago

thats what I did, and with some console log I clearly see that datas value changes, but not the child component

andy mccullough Over a year ago

can you post up the relevent code, from what you have posted, thats not clear

VersifiXion Over a year ago

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

andy mccullough Over a year ago

have you got SimpleBarChart to see?

andy mccullough Over a year ago

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

|

Eddwin Paz · Accepted Answer · 2020-03-26 16:32:22Z

0

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"]} />
);

edited Mar 26, 2020 at 16:32

answered Mar 26, 2020 at 16:17

Eddwin Paz

2,8885 gold badges32 silver badges53 bronze badges

1 Comment

andy mccullough Over a year ago

i dont see what's different here from the OP other than you've split it into two components, plus the Graph component?

Collectives™ on Stack Overflow

Re-render a child component (React with Hooks)

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related