Develop Reference

React focus div after it has loaded

I'm currently experimenting with React, and I've now run into an issue that I can't seem to solve.
In my application, I use a React library to handle hotkeys, these hotkeys have a scope, so when I want a certain set of hotkeys to be active in a div, I have to wrap that div with a <HotKeys> tag.
I have to toggle some of these divs, so I'll have something along the lines of
isActive ?
<HotKeys ...>
<div ...>...</div>
</HotKeys>
: <div ...>...</div>
I now need to figure out a way to focus the div when it's created. Pretty much every article on the web suggest something like this:
const focusRef = useRef(null);
useEffect(() => {
focusRef.current.focus()
})
return (
isActive ?
<HotKeys ...>
<div ref={focusRef} tabIndex={-1} ...>...</div>
</HotKeys>
: <div ...>...</div>
)
I've tried some variations, including having the div top level (without the <HotKeys> wrapping them), all to no avail.
When I print the focusRef object in the useEffect method, I do get the expected output, focusRef is correctly set and current is populated, but calling the focus method doesn't work. At one point I tried calling the focus method from a button and manually triggering it after the component had fully loaded, it seemed to work (document.activeElement was being changed), then for some reason it stopped working again. All this leads me to believe that somehow the component hasn't fully loaded, despite calling the useEffect hook, which, if I understand correctly, triggers when the element has rendered for the first time/after every change to state.
I'd really appreciate some help with this, since I basically started learning React yesterday.

You must to use an useCallback , because useRef don't notifies you when ref was created
https://reactjs.org/docs/hooks-reference.html#useref

I think I figured it out.
You were right about using the tabIndex but you needed to pass it in as a string like this:
tabIndex={"-1"}
When you first load it a dotted line box surrounds the div that has the ref attached.
check out this code sandbox:
https://codesandbox.io/s/nifty-wildflower-eqjtk?file=/src/App.js
grabbed from this accepted answer where they pass in a string:
Need to put focus on div in react

LitElement: keep scroll position during re-render

folks!
I have a dashboard application which consists of a more or less long page. At the end of the page, there's a grid container showing some data. Inside this container, the user can switch between different views of this container, which then changes a property (_activeAlarmsListViewSet, can be either list or top).
The switching between the views works fine and as expected, the only thing I encounter is, that the page jumps to the top during the rendering.
I already tried catching the update() call and handle it by myself (and yes, no jumping anymore), but also there's no more view switching as no re-render happens:
update(changedProperties) {
if (changedProperties.has('_activeAlarmsListViewSet') && changedProperties.get('_activeAlarmsListViewSet') != null) {
console.log('No re-render');
} else {
super.update(changedProperties);
}
}
Is there any possibility I can trigger the re-rendering without "jumping" to the top of the page and keep the scrolling position?
Thanks!

I don't think the problem is LitElement - when render is called only the parts that have changed update, the rest of the DOM remains unchanged and wherever you have scrolled to remains as long as the content is tall enough.
I think the issue is that you have a reflow between the list and top states that has shorter height, so that the browser corrects the scroll to the intermediate max height.
I most commonly see this with loaders and async directives, as these replace the DOM while waiting for a Promise.
For instance:
render() {
return html`... ${until(getAndRenderData(), 'loading...')}`;
}
Will cause the DOM of the loaded data to be replaced with loading... every time any update happens, while we only want it to happen when getAndRenderData() might change.
There are couple of ways around this, but simplest is probable to to use a guard directive:
render() {
return html`... ${guard(this._activeAlarmsListViewSet,
() => until(getAndRenderData(this._activeAlarmsListViewSet), 'loading...'))}`;
}
Now the content in the guard only changes when this._activeAlarmsListViewSet changes, and you don't have to block the update call.
Another way I find works is to split your list or top views with internally consistent states - Lit doesn't re-render sub-components unless their properties change (in which case they handle it themselves). You can then have these maintain the consistent height as you switch between them.

Why are the state/css transition times not identical for this simple slider made with ReactJS?

I made a functional demo sandbox here
This is a basic array cycler with 3 elements. And these 3 elements are rendered as slides which move visually left/right depending on the direction you pick.
I don't think the approach I took to make this work is a good one, and if you have suggestions on that I'm open to it.
But the actual question, in order to make the sliding work "equivalently" in both direction i.e. left/right I had to delay the one "sliding" to the left. My naming convention is kind of confusing too because you click the button e.g. prev/next and the array cycling/sliding is flipped. I did use an anti-pattern with the external variable that holds the direction selected since I was having problems with multiple states affecting the slider/causing rendering issues.
But TL:DR this is the onClick handler for the prev/next buttons passing in boolean for direction.I'm using a CSS animation for the motion part. I'm also aware nested ternaries are bad.
const cycleArr = cyclePrev => {
if (!slideDone) {
return;
}
setSlideDone(false);
const newArrSort = cyclePrev ? cycleLeft(slides) : cycleRight(slides);
slideClassRef.current.classList = slideDir
? `App ${slideDir === "left" ? "slide-left" : "slide-right"}`
: "App";
if (slideDir === "left") {
setSlides(newArrSort);
setTimeout(() => {
slideClassRef.current.classList = "App";
setSlideDone(true);
}, 1050);
} else {
setTimeout(() => {
slideClassRef.current.classList = "App";
setSlides(newArrSort);
setSlideDone(true);
}, 1000);
}
};
I'm aware I could have just used something off the shelf eg. slick carousel but this is a good demo of my current problems with state planning in ReactJS. I'm trying to get better/think better at it.

I'm not sure I quite understand your question, if you are referring to the additional 50ms delay when sliding, my best guess is that the call to setSlides(newArrSort); sets the state and also triggers an immediate React re-render of the component. This probably takes some amount of time, hence the desynchronisation with the CSS transition.
Anti-patterns are not there to make your life difficult, they are there to stop you getting into a confusing mess :)
Components can re-render whenever React deems it necessary, which is why state should be properly stored, and pretty effects done in useEffect hooks. I would recommend a more React-based data flow, where you update the state at the top, and let it propagate downwards, reacting to the new state, applying the correct CSS transformations. It's declarative, like HTML and CSS. You don't tell the browser what to paint, you describe how to paint it.

Gatsby build / SSR swapping out components causing display errors

Update: the below has been resolved, but I'm running into a similar issue:
In my gallery template (for an example page see here everything loads fine if navigated to via the site. On refresh, the grid parent div (GalleryGrid in styled-components) is erased/unstyled/replaced with a blank div. This actually happens after refresh, during Gatsby's hydration.
I've tried replacing the styled component with a regular div styled manually, with no luck. Unsure what's going on!
I'm running into a really strange error!
I've built a site using Gatsby, sourcing from Prismic.io, and using styled-components to style. I use framer-motion for page transitions and have added my layout component to gatsby-browser so that only page content gets transitioned, and have added similar code to gatsby-ssr to fix some initial ssr errors.
What's happening now is that whenever a page other than an index is visited directly (try this one) some components are not rendered properly. On this example, the date towards the top of the page is replaced with a <Body> component (which is styled differently to the intended <Date> component), and the actual content has been truncated and only shows the first <p>.
If you navigate to the 'portfolio' section and then navigate back to the Catalogue page, the page shows correctly - the date is now a <Date> component and the whole body text is displayed.
A similar error happens with 'essay' nodes - for example, on this page the image is intended to be in a component called ImageContainer but is replaced by an extra EssayContainer when refreshed or accessed directly (instead of navigating to the page via site navigation).
I honestly have no clue what's going on here or what could be causing this error - whether I've done something wrong or this is a bug in Gatsby's SSR or styled-components/the gatsby SC plugin. It works as expected when running gatsby develop, so must be something in the build or the SSR.
My gatsby-browser:
const transitionDelay = 500
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
export const shouldUpdateScroll = ({
routerProps: { location },
getSavedScrollPosition,
}) => {
if (location.action === "PUSH") {
window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
} else {
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
() => window.scrollTo(...(savedPosition || [0, 0])),
transitionDelay
)
}
return false
}
And my gatsby-ssr:
const transitionDelay = 500
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
And my repo is here.
Any help is greatly appreciated!

This turned out to be two issues!
The problem with some components being swapped on build was due to a media query library I was using - react-responsive- not having SSR support. I migrated to #artsy/fresnel and that resolved a bunch of the issues.
The problem with the content being truncated seems to be an issue with styled-components not playing so nicely with SSR. I had styled components setting inner HTML directly - nesting another div inside the component and setting the html from there did the trick:
<Description>
<div
dangerouslySetInnerHTML={{
__html: data.prismicGallery.data.description.html,
}}
/>
</Description>
This resolves almost everything - I'm still having a problem with Gatsby's hydration replacing/unstyling some elements, but I suspect that's a different issue (added to original question).

My React component does not update in the Safari browser

Thought everything was going great. Works perfectly in Chrome, FF, Edge, even IE 11!
The parent component holds all the sate. I pass the bets object to the child component which calculates a count to pass to the grandchild component to display.
The parent state 'bets' is an object with the keys as an ID and the value as an object.
The parent state is correctly changing when I interact with the app. Why will only Safari not update when the parent state changes? (on iOS and MacOS)
Parent
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
bets: {}
};
}
}
Child
getBadgeCount = (league) => {
const bets = this.props.bets;
let count = 0;
Object.keys(bets).map((bet) => bets[bet].event.league === league && count++);
return count;
};
// ...
<ChildItem count={this.getBadgeCount(league)} />
GrandChild
class GrandChildComponent extends React.Component {
render() {
const { count } = this.props;
return (
<div>
<div>
{count > 0 && <div>{count}</div>}
</div>
</div>
);
}
}
I console.log the count inside the grandchild render and in the componentDidUpdate and it shows the right number. Is there something apple/safari specific with react I am missing?

In the case where there are variables being changed based on which you can switch between the styles (opacity: 1 or opacity: 0.99) You can try adding a key to the element which is not being updated in Safari/iOS.
<div key={new Date()} className={'myComponent'}>{Count}</div>
I ran into the same problem, this seems to work for now.

So I did solve the very bizarre issue after a few days.
What was happening was I guess the engine in the Safari browser was not re-rendering the little badge icon correctly. I would print out the value inside the DOM, OUTSIDE of the styled badge I was using, and the number would update as expected... Leading me to believe the issue was related to styles.
THEN after removing what I thought was the CSS causing the issue, I noticed that it looked like safari was 'partially' updating the value in the badge. It appears to have half re-rendered, and the previous number collides with the new value... Not sure if this is some obscure problem with the render engine?
After adding and removing all the CSS one by one, the issue remained so I decided to trick the browser to 'force' render with a simple calculation inside the grandchild where it was being rendered:
const safariRenderHack = { opacity: count % 2 ? 1 : 0.99 };
<div style={safariRenderHack}>{count}</div>
Not a great solution but oh well I guess it's fixed. ha

I just run into similar problem.
Safari didn't re-render some texts implemented as:
<span>{someValue}</span>
On 'someValue' field update, reactJS worked fine (element was requested to render) but Safari re-renders only area of new value (shorter than previous). UI glitches :-/
If I done anything to CSS via Developer tools, element has been rendered again and looks fine :-/
After some tries, I luckily used a 'display: block;' style property and it starts to re-rendering absolutely fine. Also 'display: inline-block;' will fix that problem too, if it is needed to be used.

I had a similar problem where a center positioned span using flexbox inside a div wasn't updating correctly in Safari.
Restyling this div to use display:block solved this rendering issue so this might be worth looking into if anyone runs into the same problem in the future.
P.S. Looking at the styling code now, making the change was actually a much cleaner solution as it reduced the amount of lines from 4 to 1 but this might not be the case for all scenarios of course.
before:
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
after: (is a div so display:block is already used)
text-align: center;

When using map function , React looks at the keys :
To identify which items have changed, are added, or are removed.
Solution :
Now, As you use map function u must Add Key to the div inside map .
Use a key variable that is connected to the logic behind clicking , so that when clicking the key , the variable is updated and so React will rerender this grandchild div .
As the following code :
<div key={Count} className={'myComponent'}>{Count}</div>
PS : I discourage to use Date as a key , because I f u are clicking quickly it glitches , while if u are connecting it with a state with the logic behind clicking , it won't .

this may help you:
will-change: transform;

I know it may be late but what helped me with Safari not re-rendering reused components was:
will-change: opacity;
You may have to experiment which element in your HTML hierarchy to apply this to.
It makes no sense because no opacity was being changed in my case but it did fix the problem. Thank you, Apple...

We also ran into this problem. So, I did a short research about it and got the gist as follows:
It works by providing the unique key to the element(key={new Date()} works bcz unique even with seconds) which is not rerendering properly say a description as text inside it that changes by button or an event.
So what I got as a gist basically, providing the individual key make new dom element to react during reconcilation process rather than changing same value inside the element so basically that element showing object is made unique instead of changing value inside that dom element so I think safari specific it is as it is holding state of the element rendering dynamically. So after providing the key prop you are basically rendering the unique different element(obviously with different text/object inside it). This basically utilizes here the concept of keys while we render a list in react component.