Skip to content

Instantly share code, notes, and snippets.

View ltsharma's full-sized avatar
🏠
⚛️ 🚜

Lakshmeesha ltsharma

🏠
⚛️ 🚜
View GitHub Profile
{"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",
module.exports = {
env: {
browser: true,
es6: true,
'react-native/react-native': true,
},
parser: 'babel-eslint',
extends: ['airbnb', 'prettier', 'prettier/react'],
globals: {
Atomics: 'readonly',
module.exports = {
env: {
browser: true,
es6: true,
'react-native/react-native': true,
},
parser: 'babel-eslint',
extends: ['airbnb', 'prettier', 'prettier/react'],
globals: {
Atomics: 'readonly',
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
const AwesomeChild =({text,style})=>{
return(
<Text style={style} >{text}</Text>
)
}
export default React.memo(AwesomeChild)
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" />
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
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}
@ltsharma
ltsharma / appWithInlineFunction.js
Last active June 13, 2020 09:30
React Native Render With Inline Functions - dev.to Example
export default ()=>{
const [childState, setChildState] = useState(0);
return(
<FlatList
renderItem={
({item})=>(
<AwesomeChild {...item} onPress={(number)=>{setChildState(number)}} />
)}
keyExtractor={(item)=>`awesome-child-key-${item.id}`}
/>)