Direct Manipulation
Sometimes it is necessary to make changes to components directly, without using state/props to trigger a re-render of the entire subtree. For example, when using React in the browser, it is sometimes necessary to directly modify a DOM node, and the same is true for views in mobile apps. setNativeProps is equivalent to setting properties directly on a DOM node.
Use setNativeProps when frequent re-renders cause a performance bottleneck!
Direct manipulation is not a tool you will use often. You will typically only use it to create 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.) rather than in your React component, which makes your code harder to reason about.
Before using it, try solving your problem with setState and shouldComponentUpdate.
Use setNativeProps to Edit TextInput Value
Another very common use case for setNativeProps is editing the value of a TextInput. When bufferDelay is low and user input is very fast, the controlled property of TextInput can sometimes lose characters. Some developers prefer to skip this property entirely and instead use setNativeProps to directly manipulate the TextInput value when needed.
For example, the following code demonstrates editing the input when you press a button:
- TypeScript
- JavaScript
You can use the clear method to clear a TextInput; it uses the same method to clear the current input text.
Avoid Conflicts with the Render Function
If you update a property that is also managed by the render function, you may run into some unpredictable and confusing bugs, because whenever the component re-renders and that property changes, any value previously set through setNativeProps will be completely ignored and overwritten.