Force component to wait for redux state update - reactjs

Question

I know that question was asked a number of times, but none of answers work for me. I got the component, which job is to display user data from react-redux BUT userData can be stored in localStorage and on first load of website this localStorage is fetched to redux state, so I get the error where I want to display initials of currently logged in user. After adding async/await to mapStateToProps function localStorage gets fetched, but I still got error saying 'Cannot get 0 of undefined', using useEffect with pre set initials also gives an error. Here is my current code:
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { ReactComponent as Person } from 'assets/person.svg'
import { ReactComponent as Add } from 'assets/add.svg'
import { ReactComponent as Settings } from 'assets/settings.svg'
import { Styled, Container, Button } from './styles'
const UserInfo = ({ initial }) => {
let initials = 'UN'
useEffect(() => {
initials = initial
}, [initial])
return (
<Styled>
{initials}
<Container>
<Button>
<Add />
</Button>
<Button>
<Person />
</Button>
<Button>
<Settings />
</Button>
</Container>
</Styled>
)
}
const mapStateToProps = async ({ user }) => {
const initial = await `${user.name[0]}${user.surname[0]}`
return initial
}
export default connect(mapStateToProps)(UserInfo)
UserInfo.propTypes = {
initial: PropTypes.string.isRequired,
}
I also tried returning initial: initial || 'UNDEF' but I still receive an error. Additionally, when I don't refresh the browser on VSC save, I don't get an error. How can I force my component to wait for props from react-redux

Answer 1

I did it a little around, but now it works, i used useState and useEffect hooks and changed a bit mapStateToProps, that's my solution:
const [initials, setInitials] = useState('')
useEffect(() => {
if(name && surname) {
setInitials(`${name[0]}${surname[0]}`)
}
}, [name, surname])
and simple mapStateToProps
const mapStateToProps = ({ user }) => ({
name: user.name,
surname: user.surname,
})

Answer 2

This is not something that can be awaited: await '${user.name[0]}${user.surname[0]}' which is why you're still getting an error. You shouldn't need (or want, see https://react-redux.js.org/using-react-redux/connect-mapstate#mapstatetoprops-functions-should-be-pure-and-synchronous) to make mapStateToProps async. You're likely already doing the async call with an async redux action. You should either check for the presence of user name/surname and return a default state if undefined
const initial = user.name && user.surname ? '${user.name[0]}${user.surname[0]}' : 'UNDEF';
or add an isUserLoaded flag for the user state and return the default state, loading indicator, or not render that portion of UI until that flag is true.