This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"devDependencies": { | |
"@welldone-software/why-did-you-render": "^4.2.5", | |
"babel-eslint": "^10.1.0", | |
"eslint": "^6.8.0", | |
"eslint-config-airbnb": "^18.1.0", | |
"eslint-config-prettier": "^6.11.0", | |
"eslint-plugin-import": "^2.20.2", | |
"eslint-plugin-jsx-a11y": "^6.2.3", | |
"eslint-plugin-prettier": "^3.1.3", | |
"eslint-plugin-react": "^7.19.0", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
env: { | |
browser: true, | |
es6: true, | |
'react-native/react-native': true, | |
}, | |
parser: 'babel-eslint', | |
extends: ['airbnb', 'prettier', 'prettier/react'], | |
globals: { | |
Atomics: 'readonly', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
env: { | |
browser: true, | |
es6: true, | |
'react-native/react-native': true, | |
}, | |
parser: 'babel-eslint', | |
extends: ['airbnb', 'prettier', 'prettier/react'], | |
globals: { | |
Atomics: 'readonly', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const AwesomeChild =({text,style})=>{ | |
return( | |
<Text style={style} >{text}</Text> | |
) | |
} | |
const areEqual=(prevProps,nextProps)=>{ | |
// return false prevProps.text & nextProps.text are not equal. | |
return prevProps.text===nextProps.text | |
// else all are equal, no re-render | |
return true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const AwesomeChild =({text,style})=>{ | |
return( | |
<Text style={style} >{text}</Text> | |
) | |
} | |
export default React.memo(AwesomeChild) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default ()=>{ | |
//Sates is 0 initially | |
const [pressCount, setPressCount] = useState(0); | |
//Function to update last state by +1 | |
const updateButtonPress = useCallback(() => { | |
setPressCount(pressCount + 1); | |
}, []); | |
//Empty dependancy | |
return( | |
<Button onPress={updateButtonPress} title="Add 1" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default ()=>{ | |
const [childState, setChildState] = useState(0); | |
//using useCallback | |
const awesomeChildListRenderItem = useCallback( | |
({ item }) => ( | |
<AwesomeChild {...item} onPress={(number)=>{setChildState(number)}} /> | |
),[]); | |
const awesomeChildListKeyExtractor = useCallback( (item) => `awesome-child-key-${item.id}`,[]); | |
return( | |
<FlatList |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default ()=>{ | |
const [childState, setChildState] = useState(0); | |
//Moved functions | |
const awesomeChildListRenderItem = ({item})=>(<AwesomeChild {...item} onPress={(number)=>{setChildState(number)}} />) | |
const awesomeChildListKeyExtractor = (item)=>(`awesome-child-key-${item.id}`); | |
return( | |
<FlatList | |
renderItem={awesomeChildListRenderItem} | |
keyExtractor={awesomeChildListKeyExtractor} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default ()=>{ | |
const [childState, setChildState] = useState(0); | |
return( | |
<FlatList | |
renderItem={ | |
({item})=>( | |
<AwesomeChild {...item} onPress={(number)=>{setChildState(number)}} /> | |
)} | |
keyExtractor={(item)=>`awesome-child-key-${item.id}`} | |
/>) |