Consider the TextInput component of React Native. It has a prop called value. I set the value to this.state.text.
It also has a prop onChangeText, which I set to (text) => {this.setState({text: text}).
Setting the state will cause the view to re-render, which will in turn trigger setValue on the component.
This doesn't cause any sort of recursion or undesired behavior with stock components. However, in building my own text input component, I'm finding that using state in value and in onChangeText causes native input events to re-render the view and call setValue.
i.e user types on keyboard, native module emits onChangeText event, JavaScript component receives event and updates state, state change causes re-render, re-render calls setValue on the native component, and the native component swaps out the text with the value received from the initial event (the same value).
The problem is, when you set the text on an iOS or Android native text component, it resets the cursor. So I tried putting in a conditional if(newText != currentText) {setText(newText)}, and this works when you type slow, but when you type fast, things get chaotic and you can't predict the order of events.
I looked at how the React Native authors handle this in their own text component, and they seem to be using some sort of counter (here and here) to synchronize events, but I couldn't keep up with the logic as it was all over the place.
For now, my solution is to not use state in the render function, but then my component depends on render not being called unexpectedly to function properly, and that's just a disaster waiting to happen.
Any insight as how to better design a component like this, or how RN components get around this issue?
Related
I have a simple question: why is onViewableItemsChanged called at initial render without a horizontal flatlist being even visible? This flatlist is only shown when scrolling to it.
How can I fix this?
Thank you!
It is also possible for onViewableItemsChanged to be called during the initial render of a FlatList, even if the list is not yet visible on the screen. This can happen if the initialNumToRender prop of the FlatList is set to a value greater than 0, causing the FlatList to render more items than the ones that are currently visible on the screen.
In such cases, the onViewableItemsChanged callback will receive the list of viewable items that have been rendered, but they will not yet be visible to the user. This is the expected behavior of the FlatList component, and it is designed to optimize the performance of the list by pre-rendering items that are likely to become visible in the near future.
If you want to avoid having onViewableItemsChanged being called during the initial render, you can set the initialNumToRender prop to 0, or use other techniques to control the visibility of the FlatList component, such as conditional rendering based on a state variable or a prop passed from the parent component.
I am developing a mobile app with react native. I have a component "Period" which has a couple of TextInputs, each TextInput is stored as state. This component gets rendered in a flatlist multiple times. Now I wonder how i can get the state values of each instance of "Period" that gets rendered in Flatlist?
Any Explanation how this works in React Native. I thought every component instance has its on states?
Thanks alot
I would suggest to put all your inputs states and onchange functions callbacks in the parent component containing the Flatlist, then you can pass your states as props to children components "Period"s.
I would suggest also working with a library such as Formik to handle dynamic forms with multiple inputs
I have put console log inside of my functional component file. In this file render whenever the API called. If I called API in some other file and the API not related to that file still got logs. I am not sure why. I have checked useEffect and usestate but no clue. Even search from google no clue.
I am using Usestate to store and useEffect to reloaded the the page when data change
I am using apisauce to call the API
React native navigation bottomtab to navigate the screen
Using React.memo but still page rendered.
Any one please help me to resolve this issue. because I am new to react native.
React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
However, there may be cases where the render() method depends on some other data. After the initial mounting of components, a re-render will occur when:
A component’s setState() method is called.
A component’s forceUpdate() method is called.
Warning: You should normally try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().
I wanted to see if there is a hook in Seaside that is called before rendering, and one after rendering. It happens to me that I want to show a notification on the screen, and I would like that once the rendering is finished, this component is modified so that the next time the rendering is done, it is no longer displayed.
Thanks and regards!
Instead of 'hooks', Seaside has component decorations that you can wrap around a component to change their behaviour. If you wrap your root component, you can implement a decoration that invokes hooks before and after rendering on your entire component tree.
However, changing the state of your components while rendering will break the state backtracking behavior that Seaside offers you. The state changes should happen in the action callbacks. So, there is no 'after rendering' phase where you can change the state of your component (well, you can, but it will lead to subtle problems). Instead, use the action phase (i.e. callbacks) to change the state of your component such that the next time the rendering phase is invoked, your component is not displayed.
I'm assuming that when you say 'the next time the rendering is done', this means after the user has clicked a link or done some other action. This means you can change state while executing the action callback and arrange the state of your rendering tree such that the concerned component is no longer shown. If you do it like this, the user will see the component again when he clicks the back button in the browser.
I would like to know how to implement a component that has a fixed layout, but frequently updates its display.
Suppose it is an element that needs to be tied to some in app state like a stop watch timer:
(source: mzstatic.com)
If the timer is running then the hundredths of seconds should be ticking on every frame. But in react native my instinct is to make that a <Text>00:12.36</Text> element.
Obviously calling render() is wrong. Is creating a native module the only option for this? Or is there some mechanism to drive frequent display changes within pure js? Are there best practices in this case?
Checkout setNativeProps it allows directly set text (and other properties of elements). Here're docs
You will be able to set text of <Text> component as
this._textInput.setNativeProps({text: '00:12:36'});