converting useffect into class component - react-native

Question

const displayNameRef = useRef('');
useEffect(() => {
(async () => {
const loginMethod = await AsyncStorage.getItem('login-method');
if (loginMethod === 'google') {
displayNameRef.current = await AsyncStorage.getItem('google-user-name');
setState((s) => s + 1);
} else {
displayNameRef.current = 'Randomly_generated';
}
})();
}, []);
this is my useffect, here i getitem(display name )from async storage but i want to convert all the hooks into class component
<Header
title={('hi', displayNameRef.current)}
setSelectedTab={this.setSelectedTab}
selectedTab={this.state.selectedTab}
navigation={this.props.navigation}
openDrawerPanel={this.openDrawerPanel}
/>
so here i want to display displayNameRef.current inside of header

Answer 1

If you want to turn your hooks into class component, try to process à below:
class SomeCalss extends React.Component {
constructor(props) {
super(props);
this.state = {
s: 0
}
this.displayNameRef = React.createRef();
}
async componentDidMount() {
const loginMethod = await AsyncStorage.getItem('login-method');
if (loginMethod === 'google') {
displayNameRef.current = await AsyncStorage.getItem('google-user-name');
this.setState({s: this.state.s + 1});
} else {
displayNameRef.current = 'Randomly_generated';
}
}
render() {
return <Header
title={('hi', this.displayNameRef.current)}
setSelectedTab={this.setSelectedTab}
selectedTab={this.state.selectedTab}
navigation={this.props.navigation}
openDrawerPanel={this.openDrawerPanel}
/>
}
}
But you have to be aware that displayNameRef.current = 'Randomly_generated'; doesn't trigger re-render