Closed shop-fluencer closed 1 year ago
This looks like as the error says: Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Did you go through all the changelog in the upgrade guide?
This looks like as the error says: Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Did you go through all the changelog in the upgrade guide?
Its not the require cycling, I had never this issue except I enabled hermes and this happens now when I use this:
import { useTranslation } from 'react-i18next'
const { t } = useTranslation();
if I remove it then it works, maybe a bug ?
You can easy verify this if you create a new project and just import the translation library.
It's hard to say without knowing all of your code
After upgrading to SDK47, eas and Hermes, my splash image does not cover the top.
@shop-fluencer Refactor little-bit:
path
and linePath
can be used outside MyTabBar (decelerating objects inside component is a bed idea)screenOptions
value outside TabBar
and NativeStackWrapper
useUpdateHomelistMutation
not declaredhandleAddToWishList
not used but decelerated on every render.NativeStackNavigator.Screen
's options
outside NativeStackWrapper
key={index}
- wrong@shop-fluencer Refactor little-bit:
path
andlinePath
can be used outside MyTabBar (decelerating objects inside component is a bed idea)- Move out
screenOptions
value outsideTabBar
andNativeStackWrapper
useUpdateHomelistMutation
not declaredhandleAddToWishList
not used but decelerated on every render.- Move out
NativeStackNavigator.Screen
'soptions
outsideNativeStackWrapper
key={index}
- wrong
Thanks for the Refactoring, You mean screen options outside of my component like this ?
This
const BuyActionOptions = ({navigation, route}) => ({
header: () => <HeaderCreateShop title='Kaufabschließung' />
});
<NativeStackNavigator.Screen name="BuyAction" component={BuyAction} options={BuyActionOptions} />
instead of this
<NativeStackNavigator.Screen name="BuyAction" component={BuyAction} options={({navigation, route}) => ({
header: () => <HeaderCreateShop title='Kaufabschließung' />
})} />
and I some function/mutations are not declared because it is decalred but I removed all my components in View to check where the error comes, it comes when I use const { t } = useTranslation().
And maybe handleAddToWishlist is used, should I use it on callback ? I mean its a function but it is not running on every rerender its only running when I call the function
@shop-fluencer
@shop-fluencer: Thanks for the Refactoring, You mean screen options outside of my component like this ? Must read: https://beta.reactjs.org/learn/javascript-in-jsx-with-curly-braces
https://beta.reactjs.org/learn/your-first-component#nesting-and-organizing-components
// 🔴 Never define a component inside another component!
@shop-fluencer: And maybe handleAddToWishlist is used, should I use it on callback ? I mean its a function but it is not running on every rerender its only running when I call the function https://beta.reactjs.org/apis/react/useCallback#usecallback
You should wrap functions into useCallback because component may re-render any time, when paren component renders and props changed and so on.. But should you use useCallback hook, when handleAddToWishlist function content never changes? Answer is no but only when that function is declared "outside" the declaration of component itself.
const Foo = () => {
const bar = async () => {} // "bar" will be declared on every re-render
return <Tar moo={bar} />
}
then:
const Foo = () => {
const bar = useCallback(async () => {}),[]) // useCallback will be called and memory will be allocated for "[]" on every re-render
return <Tar moo={bar} />
}
finally:
const bar = async () => {} // "bar" will be declared only once on import
const Foo = () => {
return <Tar moo={bar} />
}
Useful pages:
Over all, I think, that part of code may cause re-render:
const { width } = Dimensions.get('window');
...
const path = [
'M0 0',
`H${width / 2.1 - midBoundary / 2.2}`,
`A 10 10 0 0 0 ${width / 1.95 + midBoundary / 2} 0`,
`H${width}`,
`V${tabBarHeight}`,
'H0',
`z`,
Hi there! It looks like your issue requires a minimal reproducible example, but it is invalid or absent. Please prepare such an example and share it in a new issue.
The best way to get attention to your issue is to provide a clean and easy way for a developer to reproduce the issue on their own machine. Please do not provide your entire project, or a project with more code than is necessary to reproduce the issue.
A side benefit of going through the process of narrowing down the minimal amount of code needed to reproduce the issue is that you may get lucky and discover that the bug is due to a mistake in your application code that you can quickly fix on your own.
"How to narrow down the source of an error"
You may not have spent enough time narrowing down the root cause of the issue. Try out the techniques discussed in this manual debugging guide to learn how to isolate the problem from the rest of your codebase.
That's understandable, it can take some time to prepare. We ask that you hold off on filing an issue until you are able to fully complete the required fields in the issue template.
This is useful knowledge, but it's still valuable to have the resulting project that is produced from running the steps, where you have verified you can reproduce the issue.
Summary
€: This happens when I import useTranslation from react-i18next
Hello,
After upgrading 46 to 47 and enabled hermes sometimes my Home screen is not showing. Sometimes its showing sometimes not. I dont understand why at the prev update I never had this problem. Maybe its because of enabled hermes ?
I have bottom TabBar. So the first screen is empty and not showing while other screens are working fine. this happened after upgrading. In the prev sdk it works perfect. Look at the picture my screen is empty.
€: error sometimes:
What platform(s) does this occur on?
Android, iOS
Environment
expo-env-info 1.0.5 environment info: System: OS: Windows 10 10.0.19044 Binaries: Node: 16.13.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 2020.3.0.0 AI-203.7717.56.2031.7583922 npmPackages: expo: ^47.0.0 => 47.0.8 react: 18.1.0 => 18.1.0 react-dom: 18.1.0 => 18.1.0 react-native: 0.70.5 => 0.70.5 react-native-web: ~0.18.7 => 0.18.8 Expo Workflow: managed
Minimal reproducible example
Nav
App.js
Home: