We Keep Coding

Ternary statement causing react components to completely disappear briefly

Here is an example to reproduce: https://codesandbox.io/s/crazy-kirch-f7fso8?file=/src/App.js
To reproduce:
right click and inspect the elements.
In your inspector (assuming you have this capability), right click on the div with the wrapper id and break on subtree modifications.
Click toggle button
Click "resume script execution" arrow to jump through each subtree modification.
Notice how initially, neither imported component renders, then they pop back in on a subsequent render.
Walking through the example in a bit more detail:
I am conditionally rendering 3 types of thing depending on a single variable using the ternary operator.
String - this seems to update immediately
Element - this seems to update just after the string does
Imported component - both components disappear, then one comes back (after element and string).
Does anyone know what may be causing imported components to briefly disappear? This is causing a flash of content that I'd like to avoid.

That is because A and B are different components, so on each toggle, you need to unmount the rendered one and mount the other. This means removing the node from the DOM and then inserting the other one.
The other cases are treated as the same element with just a text content change. Not mounting/unmounting happening here.
About the flashing, i cannot reproduce on FF or Chrome. Only if i have the break-on-modifications enabled i see it.

Embedded Component Not Updating

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?

Changing div parameter in Google programmable search does not rerender the page

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!

(react-router-dom) Rendering <Link> elements in a child component does not recognize a BrowserRouter

I'm currently working on a React project that displays a list of data in a child component and clicking on any individual piece of data would route the web app to a component with more details.
However, in order to display the data I need to sort the data based on some other information. As such, once this information is sorted I ideally would want to render an array of Link elements to replace a div that contains all of the data. However, when trying to render() I keep getting an error that "Error: Invariant failed: You should not use Link outside a BrowserRouter". I think this occurs because the render method does not recognize that the div being rendered is inside a BrowserRouter element created in the parent component.
Is there any way to get past this? If it helps, my react version is 17.0.2 and I think my react-router-dom version is 3.
EDIT: I apologize for some of the typos that occurred, I posted in a hurry. Here's a link to a codesandbox: https://codesandbox.io/s/react-playground-forked-34k2j?from-embed
If you comment out the link element inside the update() function, replacing the element works fine. It's just when a Link is created even though it is wrapped by a BrowserRouter in the parent component.

By seeing the message error you report, It looks like you need to wrap your app with the BrowserRouter, switch and routes.

Child component need to be called after parent get mounted with its styles in Aphrodite/Reactjs

I have a structure where my Parent Component (Layout)(Presentational Component) will render the DOM which has a child component (Fitme) which will get the scroll height and client to check whether the child is overflowing or not, and reduce/increase the font size.
As React doc says, Parent did mount will be called after all child. So my fitme component gets executed before parent do the paint. It makes child to not work as expected.
Requirement: As I want the Child to be plug-able, i dont want to pass any property in props from parent to notify the child about the mount state.
Edited: Please find the sandbox link.
For the First time (after load), it will not be fitting the text. but if you change the dom, so that it will rerender the component. it will work.
https://codesandbox.io/s/k2051pwl83
Update: I guess this is the issue with the plugin i am using to apply css in js way (aphrodite). not sure about it, but i have raise a ticket in git. and code is update in the sandbox.
Thanks in Advance,

First of all, there is nothing related to React. React does its job to the best. I should have not doubted React.
This issue is related to Aphrodite. It uses asap to to schedule buffer flushing.
As doc says in caveats section,
If you measure DOM elements' dimensions in componentDidMount or componentDidUpdate, you can use setTimeout or flushToStyleTag to ensure all styles are injected.
So i have to add setTimeout in componentDidMount or componentDidUpdate.
Here is the updated CodeSandbox : https://codesandbox.io/s/4364jvm7q9