Dynamically including Reactjs components

Question

I have a dashboard with areas for widgets. Position 1 can contain a clock, a weather widget or a choice of 10 or 12 other widgets. same for position 2, 3, 4 etc.

In Vue I would use to dynamically include a widget. The benifit of this is that I can then only update a specific widget.

My issue in React is that Im finding myself so something like this in a master widget container

if (currentWidget === 'clock') {
 return (<Clock settings='clockSettings' />)
}
if (currentWidget === 'weather') {
 return (<Weather settings='weatherSettings' />)
}

I have a componentDidUpdate passing the currentWidget name. Now if the props for the clockSettings update I get a repaint of all the widgets which is a big issue.

is there a react way of doing this or something similar to Vues

Answer 1

Whatever you need to update in react components, store that variable in local state if you are using class components like this.state = { variable_name: ""}.

If you are using functional components, same thing store in local state using hooks. eg: const [currentWidget, setCurrentWidget] = useState("").