React Dejank
Asynchronously loading components with conditional rendering can lead to a janky UI experience if you are not careful. React Dejank is a development utility for fixing this problem. You should not use React Dejank in production.
Install
NPM
npm install --save-dev react-dejank
Yarn
yarn add --dev react-dejank
Native
// User.js ;;; const styles = StyleSheet; Component { super; thisstate = user: {} } { this } { this } // simulate a request { } { // add dejank to any existing conditional rendering. // the dejank prop will toggle between true and false on an interval. if thisstateusername && thispropsdejank return <Text style=stylestext> The username is thisstateusername </Text> else return null; } // The first argument is the component to dejank// The second argument is an optional amount of time in milliseconds between updatesUser 3000;
// App.js ;;; const styles = StyleSheet; Component { super; thisstate = username: 'timurtu' } { return <ScrollView contentContainerStyle=stylescontainer> <User username=thisstateusername /> <TextInput style=stylestext onChangeText= this value=thisstateusername /> </ScrollView> ; }