How can I listen for changes to this variable 'editing' in my component CoinRow without reload the entire list?

Question

i have list rendering a rowComponent, until here everything is working, like this:

const [editing, setEditing] = useState(false);
 nav.setOptions({
                headerLeft: () => <Button
                    title='Edit'
                    onPress={() => { 
                            setEditing(!editing)
                >
                </Button>
<MyList>
    <CoinRow editing={editing}></CoinRow>
</MyList>

i have a left button for change the state of editing with setEditing

so now i need to How can I listen for changes to this variable in this component?

const CoinRow = ({ editing }) => {

    console.log('editing', editing)

but never i see that console, i dont want to reload all the rows

Answer 1

If you want to listen to an event on a specific props (in your case the update of state), you need to use the useEffect hook.

const [editing, setEditing] = useState(false);


useEffect(() => {
    //The code that need to fire when "editing" is update
    ...

    //By putting "editing" into this array, useEffect will listen on update on "editing"
}, [editing])

Note that useEffect render at every first render of a component.