score:5
i been immersing my self in react, so i hope my understanding is valid. react uses a virtual dom to optimize rendering of the actual dom. essentially diffing the two and only patching the dom with differences. so i believe your assertion is correct.
in regards to breaking up your large component, i think it all depends on state and what your component looks like. these are the question i would ask myself: are there multiple ui units that can stand alone and be encapsulated into a component? how much of my component is actually affected by a state change?
my understanding is that the component will not re-render unless there is a state change. react provides a lifecycle hook shouldcomponentupdate
, which does not affect it's child components, so that developers can control the rendering of the component on state change. therefore, if there are many jsx elements that do not change, it is better to extract into a component the elements that are affected by state change. i believe that we can gain performance by not having the virtual dom update with items that do not change.
while writing up this answer, i googled and found this blog entry: react is slow, react is fast: optimizing react apps in practice. i have not used the tools mentioned there, but i will probably try them out soon. i believe that this article can shed some light on the second part of your question.
Source: stackoverflow.com
Related Query
- Does React render the WHOLE component if only one part of the component changed?
- how to change the style of only one react component that is being render through .map() when the component is clicked
- How to make React page render only change component instead of the whole page?
- Adding border only to the one side of the <Text/> component in React Native (iOS)
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- Why does react call render function if I have not changed the reference of the state?
- Why does the render function in react is called twice when using the component strategy?
- React Hooks: how to prevent re-rendering the whole component when only the props.children value changes?
- Why does React render component for the second time after setting the state to the same value?
- In React useEffect does not update after the value has changed from other component
- React Router Redirect does not render the component
- The state changed but the render method from react does not trigger
- How to add/use React component in only one part (cart page) of my existing node project?
- How i can apply a background image to the body of only ONE Component React
- re render a react component only when the state change
- How to change only a part of the state from child component react hooks
- React JS render the element to the Dom of only one html page in my Django app
- Render only the next unfilled form component in React
- how do I use bootstrap in only one component in my react app without messing up the layout?
- React Hooks: conditionally render a component but with access to the whole state
- React component does no re-render when it is swapped with the same one
- What can I do to apply a prop to only one item in a map/array on the render method of a React component?
- react component does not render and it only appears in inspect section
- React Router changes route but does not render the component
- How to only update one element within a component without rerendering the whole component?
- Does react subrender function must return content in the only one external tag?
- Is there a way in React to execute only part of the render function multiple times, while the other part keeps going with initial execution?
- I have an <Add /> component that is called in two different pages, but only one of them is receiving the add count prop passed to it in React JS
- react router how can I render only the component in his route whiout the others?
- React - Used Route(path ,exact, component) to render a component on a specified path but it will only render if I hit refresh once the path matches
More Query from same tag
- With Axios.Get, You have provided an out-of-range value `value` for the select component
- How to render text in component form <text /> in react?
- React Storybook SVG Failed to execute 'createElement' on 'Document'
- Can I use CSS to appear and then disappear the border after one click?
- What is a pure reducer?
- How to authentication React Front End with back-end Node.js Express-Sessions?
- Use Link in React Component Rendered on Server
- How can I get a width of html element in React JS?
- React router nested, open new page as soon as there are params
- Initiate 'exit' on motion component before useState switches to Route component
- React Semantic Ui Menu
- React & Typescript: nested defaultProps deep merge
- Check if an image is loaded with Kotlin/JS for React
- Disable Debugging in Expo For React Native App
- Approach to react component switching between subcomponents with form
- How to set react props in Testcafe
- I am not able to use useHistory function in action creator file
- Options for dynamically adding reducers within a package being consumed
- Is there a more functional way to merge and foreach/sort two arrays in TypeScript, React?
- React hooks: maximum depth exceeded
- What's the appropriate way load async (over the network) into atomFamily/selectorFamily recoil component?
- How to render HTML Template as response from json in react js
- Problem with correct routing in a React project
- Redux reducer not being called
- Fadeout effect using react/ decrement photo length
- How to dynamically load script in React
- How to toggle between display: none and display:block on click
- My Gatsby/Drupal site fails during build because of one content in Drupal. How do I fix it?
- Material-UI: Too many re-renders. The layout is unstable. TextareaAutosize limits the number of renders to prevent an infinite loop
- React add class active on selected tab