Hello Readers, CoolMonkTechie heartily welcomes you in this article.
In this article, we will learn about Direct Manipulation in React Native. Direct manipulation is an important concept in react native.
To understand the direct manipulation concept, we will discuss the below topics :
- What is Direct Manipulation ?
- How Direct Manipulation Works ?
- UseCase using setState and setNativeProps
A famous quote about learning is :
” We now accept the fact that learning is a lifelong process of keeping abreast of change. And the most pressing task is to teach people how to learn.”
So, Let’s begin.
What is Direct Manipulation ?
The definition of Direct Manipulation says that
” Direct Manipulation is the process of making a component changes directly without using state/props or render whole hierarchies of components for a small change in one component.“
Before the understanding of direct manipulation, we need to understand that how any components display on the UI Screen ?
The answer is that we need to write code for that components in render() method to display any component in the screen.
Now, what if you want to add/change any component?
The answer is we have to change state or props, otherwise the render() method will not be called. The render() method renders the whole component hierarchies even if there is a change in the only one component.
So the solution for this problem is Direct Manipulation that does not render all the component hierarchies for one component change.
In other way, we can say that
“It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree (or render the whole hierarchies of components for a small change in one component). This process is called Direct Manipulation.“
How Direct Manipulation Works ?
In this section, we will see that how to work Direct Manipulation.
Direct Manipulation uses setNativeProps and Refs. setNativeProps is the react native equivalent to setting the properties directly on a DOM node.
and then, next question is “When to use setNativeProps and Refs ?”
Use setNativeProps when frequent re-rendering creates a performance bottleneck.
Direct manipulation will not be a tool that we reach for frequently; we will typically only be using it for creating continuous animations to avoid the overhead of rendering the component hierarchy and reconciling many views. setNativeProps is imperative and stores state in the native layer (DOM, UIView, etc.) and not within our React components, which makes our code more difficult to reason about. Before we use it, try to solve our problem with setState and shouldComponentUpdate.
UseCase
Let’s understand setNativeProps /Refs and setState concepts with one use case with the below code examples:
” We have one TextInput which should be cleared when button is pressed.“
1. Using setState
import React from 'react';
import {
TextInput,
Text,
TouchableOpacity,
View,
} from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
inputText: '',
}
}
clearText = () => {
this.setState({
inputText : ''
})
}
render(){
console.log("render method is called")
return(
<View style={{justifyContent :'center',flex:1}}>
<TextInput
style={{height: 50,marginHorizontal: 20, borderWidth: 1, borderColor: '#ccf'}}
value = {this.state.inputText}
onChangeText= {(text) =>{
this.setState({
inputText : text
})
}}
/>
<TouchableOpacity onPress={()=>this.clearText()}>
<Text>Clear Text</Text>
</TouchableOpacity>
</View>
);
}
}In this above code example, we change the text or clear button each time. Render method is called which re-render the whole component even if there is a change for the component.
2. Using setNativeProps
import React from 'react';
import {
TextInput,
Text,
TouchableOpacity,
View,
} from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
text: '',
}
}
clearText = () => {
this._textInput.setNativeProps({
text: ' '
});
}
render(){
return(
<View style={{justifyContent :'center',flex:1}}>
<TextInput
ref={component => { this._textInput = component}}
style={{height: 40,marginHorizontal: 18, borderWidth: 1, borderColor: '#ccc'}}
onChangeText= {(text) =>{
this._textInput.setNativeProps({text: text});
}}
/>
<TouchableOpacity onPress={clearText}>
<Text>Clear Text</Text>
</TouchableOpacity>
);
}
}In above code example, render method will not be called when we click on clear text button or text is changed.
So Here the component will not be re-rendered. We can change any props of a component using setProps and Refs without using re-render().
Some times If we update a property that is also managed by the render function, we might end up with some unpredictable and confusing bugs because anytime the component re-renders and that property changes, whatever value was previously set from setNativeProps will be completely ignored and overridden. So we need to avoid conflict with the render function.
By intelligently applying shouldComponentUpdate, we can avoid the unnecessary overhead involved in reconciling unchanged component subtrees, to the point where it may be performant enough to use setState instead of setNativeProps.
That’s all about in this article.
Conclusion
In this article, We understood about Direct Manipulation in React Native. We also discussed how Direct Manipulation works with use-case. In Summary, we can say that :
- Direct Manipulation is the process of making a component changes directly without using state/props.
- Direct Manipulation helps to prevent render all the component hierarchies for one component change.
- Direct Manipulation uses setNativeProps and Refs when frequent re-rendering creates a performance bottleneck.
Thanks for reading ! I hope you enjoyed and learned about the Direct Manipulation concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING !!???
