Understanding the full anatomy of useEffect() to set behavior of a Component

2021-01-25 16:39 asif malik imported from Stackoverflow

I was reading docs from https://www.reactnative.express/react/components/function_components I do not understand How does the following component work

import React, { useEffect, useState } from 'react'
import { Text } from 'react-native'

export default function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const id = setInterval(() => setCount((count) => count + 1), 1000)

    return () => clearInterval(id)
  }, [])

  return <Text style={{ fontSize: 250 }}>{count}</Text>

My questions:

What is the use of the function useEffect() [What arguments does it take and what does it do with them]
Why we declared the variable const id and why we assigned it setInterval(() => setCount((count) => count + 1), 1000)
What does setInterval() function do. What arguments does it take and what does it do with them. [I am assuming it takes a function to execute and a value which works as a delay for the next execution (I am assuming next execution happens whenever some value in the component changes to re-render the Component.) ] I understand setCount() takes in argument count and returns count + 1, which setCount() uses to update the value of variable count.
What does return () => clearInterval(id) mean. [As far as I understand return statement calls a arrow function which returns clearInterval(id) which is then returned as a first argument in useEffect() function.]. So in essence useEffect takes an argument returned by clearInterval(id) where id was received from setInterval() as returned value. and Finally --
What does clearInterval(id) means , What does it do with id and what does it return.
What does the second argument in useEffect() mean.

I know if I look in various docs in detail I may find all the answers but that will consume a lot of my time. I need to implement it now.

PLEASE be GENEROUS O Great Coders!! save the enthusiasm I have for this Website, I will surely become a great coder someday but now I need help.

See also questions close to this topic

Trouble passing props from functional to functional component
I am passing props to a functional component, but I keep getting an error:
```
const renderItem = ({ item }) => (

    <CommentCellClass
      key={item.key}
      commentLikes={item.commentLikes}
      .... more props
```
I try and access them in the CommentCellClass component:
```
const CommentCellClass = ({ props, navigation }) => {
  const { key, commentLikes } = props;
```
But I get the following error:
```
   TypeError: undefined is not an object (evaluating 'props.key')]
```
What am I doing wrong? The props are not null (I checked before I passed them to commentCellClass)

Sorry for the confusing name (CommentCellClass is a functional component). We are in the process of converting the class components to functional components in our app.

Select and unselect component when one is selected

I've to display three components (cards) from which the user can select one. I've placed those three components inside a ScrollView as:

            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                <LocationAndPriceCard
                    price={'100'}
                    title={'Choice 3'}
                    pressEvent={() => {
                        alert('Choice 3 should highlight now and all other should be uselected')
                    }} />
                <LocationAndPriceCard
                    price={'200'}
                    title={'Choice 2'}
                    pressEvent={() => {
                        alert('Choice 2 should highlight now and all other should be uselected')
                    }} />
                <LocationAndPriceCard
                    price={'300'}
                    title={'Choice 1'}}
                    pressEvent={() => {
                        alert('Choice 1 should highlight now and all other should be uselected')
                    }} />
            </ScrollView>

Here is how LocationAndPriceCard is coded:

function LocationAndPriceCard({ price, title, pressEvent }) {

    return (
        <TouchableOpacity style={styles.frame} onPress={pressEvent}>

            <Text style={styles.priceTxt}>RM {price}</Text>
            <Text style={styles.title} numberOfLines={2}>{title}</Text>
        </TouchableOpacity>
    );
}
...
    frame: {
        borderWidth: 1,
        borderColor: '#EBEBEB',
        width: 180,
        // height: 180,
        backgroundColor: '#fff',
        borderRadius: 8,
        margin: 5,
        padding: 10,
    },
...

In the code above how can I change the borderColor to say tomato when the user taps on a Choice 2 and all the other selected cards should change back to #EBEBEB?

private repo is not compatible with native modules
I have a private gitlab repo and i added this repo to my App's package.json.

index.js in my private gitlab repo
```
module.exports = function() {
    console.log("Hello World!!!!")
}
```
Now in my App's package.json i just call this gitlab repo using the deploy token.
Run "npm install" and this package is installed.

Finally import this in my App.js.
This works perfectly. RNN() is called and "Hello World" is logged in the console.

Now in my private Gitlab repo, i changed the index.js to the below code.
```
// module.exports = function() {
//    console.log("Hello World!!!!")
// }

import { NativeModules } from 'react-native';

const { RNNativeToastLibrary } = NativeModules;

export default RNNativeToastLibrary;
```
In my android, i have created a new module with a method that just returns the device build model.

Now i install this gitlab repo again in my App. I run "npm install" it shows that package is installed. I run "react-native link native-toast" to link all the dependencies in android. But now when i try to run the app i get this error
```
FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.
   > Could not resolve project :native-toast.
     Required by:
         project :app
      > Unable to find a matching configuration of project :native-toast:
          - None of the consumable configurations have attributes.
```
I can see settings.gradle has the package

In build.gradle(app)

But for some reason i cannot add the package in my mainApplication.java
It throws cannot recognise symbol error

What am i doing wrong here???
Why isn't my package being recognised??

Related questions

Understanding the full anatomy of useEffect() to set behavior of a Component

See also questions close to this topic