score:17
yes, if you don't modify a subtree within react then the dom won't be touched at all. it's easy to wrap non-react functionality like a handlebars template in react. you can either use dangerouslysetinnerhtml
:
render: function()
return <div dangerouslysetinnerhtml={{__html: template(values)}}>;
}
or you can simply return an empty div and populate (or attach event handlers, etc) it in componentdidmount:
render: function()
return <div />;
},
componentdidmount: function() {
var node = react.finddomnode(this);
node.innerhtml = template(values);
}
in the latter case, react won't touch the dom after the initial render because render
always returns the same thing.
score:0
have a look at this module. simple and very effective. https://gist.github.com/alexeisavca/d4ff175fd16c93c8785d
here's a coffeescript version of it.
module.exports = reactignore = react.createclass
shouldcomponentupdate: ->
false
render: ->
react.children.only @props.children
and wrap your component in it:
<reactignore>
yourcomponent
</reactignore>
Source: stackoverflow.com
Related Query
- React: leave the contents of a component alone
- How to pass in a react component into another react component to transclude the first component's content?
- Is there a way to check if the react component is unmounted?
- React Hooks Error: Hooks can only be called inside the body of a function component
- Why is `Promise.then` called twice in a React component but not the console.log?
- How to allow input type=file to select the same file in react component
- React Warning: Cannot update a component from inside the function body of a different component
- Inserting the iframe into react component
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- How to override the width of a TextField component with react MUI?
- Figuring out how to mock the window size changing for a react component test
- How to make the whole Card component clickable in Material UI using React JS?
- React Router V6 - Error: useRoutes() may be used only in the context of a <Router> component
- What is the correct way of adding a dependency to react in your package.json for a react component
- Is there a right way to pass data into a React component from the HTML page?
- How do react hooks determine the component that they are for?
- Accessing React component children props from the parent
- React TypeScript HoC - passing Component as the prop
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- Adding border only to the one side of the <Text/> component in React Native (iOS)
- Get the current path in a react component
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- The right React Component PropTypes for es6 (Weak) Maps, Sets
- Re-render component when navigating the stack with React Navigation
- how to make material data grid width to fill the parent component in react js
- 'A valid React element (or null) must be returned' error with one of the component in ReactJS
- What is the purpose of 'export' in React component declaration?
- Passing a function with React Context API to child component nested deep in the tree
- What is the necessity of "export default connect" when you are connecting your react component to redux store
- React - How to detect when all sub-components of a parent component are visible to the user?
More Query from same tag
- Issue with displaying props in Card Component - React
- Formik ReactBoostrap Form not validating
- TypeError: nextCallback is not a function
- React/Jest/Enzyme - await not waiting long enough
- Get height of element when useState is initially set
- Highlighting user selected text using javascript
- ReactJS - Error while loading data from json file
- How to use Redux RTK Query with Supabase
- keep highcharts legend responsive when another div lies over chart
- Redux Selector not triggering when I'm calling it from mapstatetoprops
- How to call a user defined function to print inside a <td> in react
- How to pass variables to a function in react
- How to use React Hooks in React standalone?
- Can't POST multipart/form-data from React to Spring
- Integration test failing when trying to render a global component
- Limiting containers to three fixed sizes
- How to statically type a string property within a React component using Typescript
- Managing state of individual rows in react js table
- A node cannot exists twice in the state tree ( mobx-state-tree )
- Programmatically change the value of react-select component
- How to use a state from one class to another
- Use process.env in html head
- Error when running jest on a react native + typescript app (Jest encountered an unexpected token)
- How to validate multiple forms at the same time
- Can't update react-dom 15.6.1 to 16.x.x
- HOC's and Render Props With Functional Components in React 16
- typescript gives me error when i try to pass mapped object as children
- Immutable.js alternative to boost React performance
- usestate in react for setting state
- Reactstrap dropdown without a select or button