In order to update a prop inside a child component, I was passing a function that updates this prop as a prop to the child component. So the question is that a good approach? and
what is the best approach to update a prop from a child component when using Typescript ?
this is called lifting state up and it is a common approach in React to keep components in sync,
it works by moving the state to the parent component (so you can share it with other siblings) and then passing the state and the event handler as a props
for more details see the official react docs
https://reactjs.org/docs/lifting-state-up.html
I'm new to react. I'm going through their docs to understand how react works. So it was mentioned that when state/props/setState() changes/called, react rerenders the entire component.
Also, I read that react elements are immutable and they are rendered only when there is a change. So when react tries to render a component it actually traverses through all the elements checks for differences and renders only those elements whose data is changed. It won't simply re-render the entire component.
Am I right regarding this? Or is my understanding wrong?
I read that React elements are immutable and they are rendered only when there is a change.
Saying that React elements are immutable is not true, you need to treat them as immutable, especially component's state and props.
So when React tries to render a component it actually traverses through all the elements checks for differences and renders only those elements whose data is changed.
The default behaviour is to render all sub tree when the parent rerendered by calling setState (which triggers Reconciliation on component's sub tree).
So saying it will render components on "data change" is not true, they will rerender anyway by default, even if the "data" didn't change.
On saying "data is changed" we mean on props change (shallow comparison by default, use memoization to change it).
We can use key prop to help with the reconciliation process.
You are right, react re-renders the component when props or state changes.
That being said, when a child component received new props, react does not check if the props have changed when you use React.Component, it just re-renders even if you pass same props again.
In order to make components render only if they receive different props you can use React.PureComponent in case of class components or you can wrap the component with React.memo() in case of functional components.
I believe a clearer way to summarize when React components re-render would be:
React components re-render when, and only when:
Their state changes (via setState() or useState())
They are passed new props;
Their parent component re-renders.
Caveats:
You must update state correctly for the component to re-render, i.e. via setState() or useState(). If state changes via other, "illegal" means, such as directly accessing state, React won't notice, and won't re-render the component.
React props are read-only, so when we say "when a component's props change," we really mean when the component is passed props with changed values. The props should not be mutated within the component.
If you use useMemo() or React.memo(), then a child component will only re-render when the parent component re-renders if the props it receives have changed.
It's important to distinguish between re-rendering the virtual DOM and updating the actual DOM. Just because a component re-renders doesn't mean it's updated the DOM. When a component re-renders, React compares the new version to the previous, and only updates the actual DOM if something has changed 1, 2.
Nothing has made this clearer for me than this cheat sheet by A. Sidorenko.
Edit:
Essentially yes any state change will trigger a re-render. This includes the component where the state change was initiated and all its children. For instance, if your composition is:
A > B > C
If the state for A is updated then A, B, and C will get re-rendered. There are ways to prevent re-rendering subcomponents (e.g. memo, useMemo) so I point you the cheat sheet referred to above for the complete details.
I thought with Context Hooks, one should NEVER use props.
If i am rendering the below
<DBButton name={"Couchbase"} onClick={()=>setActiveDBName("Couchbase")}/>
<DBButton name={"Cassandra"} onClick={()=>setActiveDBName("Cassandra")}/>
<DBButton name={"MongoDB"} onClick={()=>setActiveDBName("MongoDB")}/>
How do I pass the "couchbase"/"cassandra"/etc names to the DBButton functional component only using Context and not through props?
I've just started learning React and in the ReactDOM.render there is document.getElementById('someid'), what does it do?
It's the container to which the contents of the first parameter will be rendered to.
Check out public/index.html in your project if you use create-react-app. You should be able to find the <div> with an ID of root (the default value for create-react-app). You can change the ID of that div, but you will have to change the ID in the getElementById call in your index.js.
Here's what the documentation says about it: https://reactjs.org/docs/react-dom.html#render
ReactDOM.render(element, container[, callback])
Render a React element into the DOM in the supplied container and
return a reference to the component (or returns null for stateless
components).
If the React element was previously rendered into container, this will
perform an update on it and only mutate the DOM as necessary to
reflect the latest React element.
In Backbone.js, you can specify a view's element by using the el property or by calling view.setElement().
Is there an equivalent way of hooking up a React.js component to an existing DOM element?
I'm not overly familiar with Backbone, but to hook a React component into the DOM you use the renderComponent function. The first arg is the component, and the second is a DOM element:
React.renderComponent(<SampleComponent />, document.getElementById('app'));
Updated per the context given in the comments:
React hooks up to an element by replacing its contents, but not the element itself. You can call renderComponent() more than once on that element and it will run the same diff algorithm each time. This is handy if you want to pass in different props, pre-render on the server, or render a different component entirely. The same process is used to update the actual DOM each time, just like if you were to use setState() within the component itself.