I have build a React app containing a google programable search (cse). Within the div element I have added a custom parameter data-as_oq that is population with a state variable:
<div className='gcse-search' data-as_oq={this.state.myvariable}></div>
That parmeter is used to add search parameters to the google search (i.e. site:mysite.com). This works as expected when the app is rendered the first time. However, if I change this.state.myvariable the div is not re-rendered. I tried from setting the state with setState over to this.forceUpdate() withouth access. Not sure if this is intended behavior or if I am missing anything. Would appreciate any help!
Related
I've created a react component which is a form within a model in a pop-up hover. But Every time I load the page the get the following Warning in the console, and I want to remove it.
Here's the warning-
Warning: A component is `contentEditable` and contains `children` managed by React.
It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated.
This is probably not intentional.
div
FormControl#http://localhost:3001/static/js/1.chunk.js:31598:18
WithStyles#http://localhost:3001/static/js/1.chunk.js:78328:25
TextField#http://localhost:3001/static/js/1.chunk.js:52126:22
WithStyles#http://localhost:3001/static/js/1.chunk.js:78328:25
Please let me know if I've missed out on any information or code snippet.
I am working on a React Native project, and I am currently focused in the Chatroom aspect. Due to user roles, this component is embedded in another component for 2 of the 3 user types, but navigated to (not embedded in anything other than App.js) for the other type.
This means sometimes the app uses the props it was supplied with, and other times it uses the props.route.params?.item syntax to extract information. As is such its difficult to maneuver with useEffects to make sure it works on both sides.
The issue I am facing is with the embedded version of this component. It takes three props, the chatroom, and two booleans that are unrelated to this. The chatroom can change as a GUARDIAN user can see their CHILD user's messages, but they cannot text in them (those are the other two boolean values). From the parent component, users can toggle whether they are the Guardian accessing their own chat, or if they want to view their children' chats. While the all three values change properly (I console.log'd this in the parent component to confirm) the chatroom does not change inside of the embedded component.
I will show you what I mean...
// PARENT COMPONENT //
function renderMessageThread(chat){
console.log("\n\n\n", chat[0].messages.length, "LANDING")
console.log(msgUser.id, isThisChatMine())
return <MessageThread hardCodedChat={chat} hardCoderUserId={msgUser.id} isItMe={isThisChatMine()} />
}
The console.logs show the proper values. Inside the MessageThread component, both hardCoderUserId and isItMe are correct values, even when isItMe changes values. hardCodedChat, however, never has its value changed from the first time it is created. Does anyone have any ideas on how to have this changes as well?
I've got a complex component which does all its rendering in a render function. There are multiple parts to this, and different bits of the view get rendered - one of these things is a filter bar, showing the filters that have been applied.
What I'm noticing happening, is if I apply a filter which in turn presents this bar, it causes everything else to be fully re-rendered. This is causing a number of other issues and I need to try and stop it from happening.
I've never come across this issue when using normal templates as Vue seems to handle these very intelligently, but I have no idea how to tackle this. The only thing I can think of is setting a key on each thing I don't want re-rendered but not sure if this will a) solve the problem, and b) be possible for the content that is passed in through a slot
Has anyone else faced this issue, and if so how can it be solved?
I had a similar issue when using vuetify text inputs in a complex component which was causing the app to slow down drastically.
In my search I found this link which was specific to vuetify:
high performance impact when using a lot of v-text-field
then found out that this is actually a vue thing from this GitHub issue:
Component with slot re-renders even if the slot or component data has not changed
and there is plan to improve this in it is tracked here (vue 3 should resolve this issue):
Update slot content without re-rendering rest of component
so after reading through all these I found some workarounds that helped me a lot to boost the performance of my app, I hope these will help you as well:
divide that complex component into smaller ones specially when there is some bit of code that changes data that bounds to template causing re-rendering (put them in their own component)
I moved all data layer control to the vuex store, instead of using v-model every where and passing data as events and props, all the data is updating in the store through an action and read from the store through a getter. (from data I mean somethings that is being looped in the template in a v-for, API results, and so on... all of them is being set, updated and read through the store. my components still have the data object but only for the things related to the style and template control like a boolean to control a modal or an imported icon which is used in the template and alikes)
lastly I wrote a function called lazyCaller which its job is to update the values in the store with a delay (when immediate data update isn't necessary) to avoid rapid updates comping from something like a text input (with out this every key stroke trigger the value update action)
A select element within a React.js component takes 2 clicks to update in Firefox, but updates correctly on first click in Chrome and Safari.
It's a component using Redux + React-Redux and the value of the select element is dictated by a store value passed to it via mapStateToProps.
React Devtools shows the value of the select element updating correctly but the DOM itself doesn't update on the first click.
Redux Devtools is showing the correct actions being passed and correct state changes being made.
I've created a isolated recreation of the component tree in CodeSandbox (it functions correctly here so not a lot of help): https://codesandbox.io/s/jl7rpw3635
Here's a gif of the problem
Thanks in advance!
I ended up solving this issue by modifying the select component to render its options on mount, then attach them to a class property, avoiding re-rendering each option again every time the select component updates (they never change so it probably makes sense to do this) - https://codesandbox.io/s/m7m2qqp9py
We develop an Ember based framework for internal use of various groups within our organization. Along with this, we maintain a demo page, which displays all the components we've developed along with documentation on how to use the components. I need to modify one of the component demo pages, to allow the user to custom build the component. For example, the component has two properties showCheckboxes and showRadioButtons. By default, showCheckboxes is true, and the component, of course, displays checkboxes. I want to add a select so the user can choose between radio buttons and checkboxes. Everything is wired up correctly and the routes action gets called, but, if I select radioButtons, the component does not refresh and display readio buttons. I've set breakpoints and I see that the route is not called, so the new properties are not read. How can I force Ember to rebuild the component from scratch? I've tried this.refresh() in the route, I've tried setting the model to the new model with the changes, but the component does not redraw with the new properties. I've also tried transitionTo. But if I don't pass a model, nothing happens. But if I pass in the new route, I get this error:
Error: More context objects were passed than there are dynamic segments for the route
I hope this was clear enough for someone to provide some guidance.
Thanks