I think there may have been some confusion as to what I was trying to achieve. I managed to solve the issue I was having and have shown my code below which shows how I solved it. Separate File (ComponentIndex.js): let Components = {}; Components[‘Component1’] = require(‘./Component1’).default; Components[‘Component2’] = require(‘./Component2’).default; Components[‘Component3’] = require(‘./Component3’).default; export default … Read more
In index.js change <React.StrictMode><App /><React.StrictMode> to <App /> and you will not see this warning. Please note that strict mode helps you with Identifying components with unsafe lifecycles Warning about legacy string ref API usage Warning about deprecated findDOMNode usage Detecting unexpected side effects Detecting legacy context API Please refer to https://reactjs.org/docs/strict-mode.html before removing it.
TL;DR The first example is an unintentional side-effect and will trigger rerenders unconditionally while the second is an intentional side-effect and allows the React component lifecycle to function as expected. Answer I think you are conflating the “Render phase” of the component lifecycle when React invokes the component’s render method to compute the diff for … Read more
EDIT: Updated to reflect React 16 Custom attributes are supported natively in React 16. This means that adding a custom attribute to an element is now as simple as adding it to a render function, like so: render() { return ( <div custom-attribute=”some-value” /> ); } For more: https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html Previous answer (React 15 and … Read more
This relates to stateful DOM components (form elements) and the React docs explain the difference: A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props … Read more