How to prevent rendering on change - react-native

Question

I have the following script. I'm running on a pc using create-react-native-app. The console gives me the following warnings. I'm not sure what to do about them if anything.
Here are the warnings:
Warning: componentWillReceiveProps is deprecated and will be removed in the
next major version. Use static getDerivedStateFromProps instead.
Please update the following components: TouchableOpacity
Learn more about this warning here:
hxxxx/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-
dev.js:5706:19 in printWarning
- ... 19 more stack frames from framework internals
19:26:44: Warning: componentWillMount is deprecated and will be removed in
the next major version. Use componentDidMount instead. As a temporary
workaround, you can rename to UNSAFE_componentWillMount.
Please update the following components: TouchableOpacity
Learn more about this warning here:
hxxx/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-
dev.js:5706:19 in printWarning
- ... 19 more stack frames from framework internals
19:26:46: Warning: componentWillReceiveProps is deprecated and will be
removed in the next major version. Use static getDerivedStateFromProps
instead.
Please update the following components: Text, TextInput, View
Learn more about this warning here:
hxxx/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-
dev.js:5706:19 in printWarning
- ... 21 more stack frames from framework internals
19:26:48: Warning: componentWillMount is deprecated and will be removed in
the next major version. Use componentDidMount instead. As a temporary
workaround, you can rename to UNSAFE_componentWillMount.
Please update the following components: TouchableHighlight
Learn more about this warning here:
hxxx/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-
dev.js:5706:19 in printWarning
- ... 23 more stack frames from framework internals
I'm having the following 2 problems with the code:
On each change of the input field the app renders. I need to suppress the render until onSubmitEditing is called
When the code runs I get a yellow warning on my IOS device;
Warning:componentWillMount is deprecated...
import React from 'react';
import { TextInput,Button, StyleSheet, View,Text, ScrollView } from 'react-native';
import {Constants} from 'expo'
let id=0
const Todo = (props) => (
<Text>
{/* <input type='checkbox'
checked={props.todo.checked}
onClick={props.onToggle}
/> */}
<Button title='delete' button onPress={props.onDelete}></Button>
<Text>{props.todo.text}</Text>
</Text>
)
export default class App extends React.Component {
constructor(){
super()
this.state={
todos:[],
inputText:''
}
}
clearText(){
this.setState({inputText:''})
}
addTodo(text){
console.log(text)
this.setState({todos: [...this.state.todos,
{ id:id++,
text: text,
checked:false
}
]
})
this.setState({inputText:text})
}
toggle(id){
this.setState({todos: this.state.todos.map(todo=>{
if(id!==todo.id)return todo
return{
id:todo.id,
text:todo.text,
checked: !todo.checked}})})
}
removeTodo(id){
this.setState({todos: this.state.todos.filter(todo=>(todo.id!==id))})
}
render(){
console.log(this.state)
return(
<View style={styles.container}>
<Text >Count of Todos: {this.state.todos.length}</Text>
<Text >{"Todo's checked:"}
{this.state.todos.filter(todo =>(todo.checked===true)).length}</Text>
<TextInput
style={{height:25,borderColor:'red',borderWidth:1,textAlign:'center'}}
value={this.state.inputText}
placeholder={'add Todo'}
onSubmitEditing={()=>{this.clearText()}}
onChangeText={(text) => {this.addTodo(text)}}
/>
<ScrollView>
{this.state.todos.map(todo=>(
<Todo
onToggle={()=>(this.toggle(todo.id))}
onDelete={()=>(this.removeTodo(todo.id))}
todo={todo}
key={todo.id}
/>))}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
flexDirection:'column',
height:50,
paddingTop:3*Constants.statusBarHeight,
}
})

Answer 1

Pure components defined as function will always re-render.
Convert the component to a class and prevent the re-render in shouldComponentUpdate() returning false.
The signature is shouldComponentUpdate(nextProps, nextState). Say you for not re-render is that the componet's params haven't changed:
shouldComponentUpdate(nextProps, nextState){
return !equals(nextProps, this.props);
}
i think that this example could help you as it's well explained with examples: https://reactjs.org/docs/faq-functions.html
after all it's about creating a class with methods inside and call it as usually in an OOP language.
Hope it helps you