Let's say I have a WebView and it's loading a fixed HTML string like:
const html = "<html>....</html>"
<AutoHeightWebView source={{html:html}} />
Would that be necessary to wrap it inside useMemo so the component doesn't get re-rendered more than necessary?
That depends on if html changes at all. If it doesn't, you may as well create a constants file outside the component and utilize it from there.
useMemo memoizes values dependant on certain state/dependency changes (React Documentation). Therefore if html does not change based on some other state/dependency changes, I don't think its necessary to wrap it in a useMemo.
However, you won't see any performance degradation/negative side-effects if you did wrap html in a useMemo.
Related
I'm in the process of migrating some legacy pages to web components using StencilJS, so I'm in a situation where some elements are already handled with StencilJS, some are not, and migrating everything will take quite some time.
In this context I need to be able to update the contents of a target div not managed with StencilJS from a StencilJS component. This div is in a totally different branch of the DOM and it's impossible to move it into the component without rethinking the entire page.
So from my component I need to be able to do something like this:
render() {
const target = document.getElementById(this.targetDiv);
if (target) {
target.innerHTML = jsxToString(this.renderDivContents()) // obviously this doesn't work
}
}
renderDivContents() {
return (<p>Some JSX stuff</p>)
}
So, in other words I need to compile the JSX template immediately into a string. I'm not sure how to do that with StencilJS and if it is even possible. I'm under the impression that there is a way to achieve that because it looks very similar to what we do in tests, but all the resources I find on the topic are for JSX with React and does not really help with StencilJS
If this is not the correct approach, what do you suggest? I know injecting HTML into a DOM element is not ideal, but I'm just trying to find a temporary solution to be able to release my changes gradually.
PS: I know I can also use an overlay approach (generate a div into the component and give it the same position and size than the target div), but this sounds even uglier than innerHTML. This is not the answer I expect.
In my page I have component. the component is rendered and alive possibly have changes (like someone type in input and etc.).
How in vue I cache this component and their state and render it again base on my logic and still keep the binding and everything?
I want to do something similar to vue keep-alive, take a snapshot of component (maybe include the dom) and store it in variable (snapshot).
according to some logic I do, I want to re-render or just render it again. (I prefer not to keep it on the dom, maybe in memory).
What is the vue way to do this?
I think something like my pseudo code this might help:
const compRef = this.$ref.comp;
const compInMemory = takeSnapshot(compRef);
..
if (someLogic) {
renderComponent(compInMemroy)
}
I have an application in vue with typescript. I saw when I use import to load component then I got component-bundle with all the code of component inside.
I wonder if should I do this for every component I want to load, for example: I have app.vue inside I have toolbar.vue and drawer.vue. in my router components I have others vue components.
What I'm afraid that gonna happened is app.js is loaded then components inside the route definition(500k), then I get the toolbar component (1.5mb). and I'll get flashing screen weird.
So, should I use splitting bundle for every component in my app?
You can do code splitting if you are not expecting that particular component to be re-used for every page.
Take for example the Header and Footer component. Since they will be used in almost all of the pages, there is no reason to code split as you want it to be loaded along with the bundle for all pages.
Take for example you have a component where it has a Blog Widget. This component will only load in the /blog page. Therefore, this is a good use case to be using code splitting as you do not need the Blog Widget to be bundled in other pages except in the /blog page.
I can only provide you with a generic answer and using the Header and Footer components are the best way to express different use cases. As for the rest of the components, you have to decide for yourself if it is worth to code split or not.
I am working on swipeListView in react native and they have line which state
If you are using the standalone you can just keep a ref to the component and call closeRow() on that ref.
But how do I create a ref and and how do I call it.
and also react native claims not to use the ref much and why is it so.
Not sure about React Native but here's how you create ref's in a React component.
<Component
ref={instance => {
this.componentReference = instance;
}}
/>
//Once you create a ref, you can access it in any of your function using this.ref (Like here it would be this.componentReference).
To answer your 2nd question, refs are considered a bad practice because they are nothing but a workaround to directly access your DOM element. React wants you to avoid direct DOM manipulations since you essentially loose the benefits and speed of React virtual DOM and your state gets cluttered since you directly manipulate your DOM.
i want to create such function which can't be access from outside the component of createClass
Privacy is a tricky problem in javascript there are ways of doing it with different type of tradeoffs. But there is no way of making a function private inside of a react component.
You can place the function outside the react component but in the same module with your component and not export that but (again, there are tradeoffs) that means you won't be able to access props or state in that function. In my opinion you don't have to worry about privacy in your react components, privacy is implied, almost all the time (in my opinion) no one should be calling functions directly from your react component.