In React, many components are used to create the final product of a React app. Components can be viewed as bricks completing the outcome of a building. Each brick together keeps the building sturdy, which we see daily in our lives. Fortunately, app components are not as concrete as bricks, and they can be manipulated and changed based on the needs of the app in question.
For example, this is the input of a component in React
and this is the output:
and this is the output:
The benefit of components in an application is that they can be reused and handled independently. Components come in two types class-based and functional. The above picture shows a functional component. Class-based components are becoming phased out, but it is still necessary to understand them as they are still used in older web applications. Components can pass other components downwards as a parent-child relationship. When looking at a React app, generally, a component starts with a capital letter. For example: "App.js" is what a component would look like.
State is an object that holds the current data of a component.
This data is subject to change depending on the component's life cycle.
For example, on an eCommerce website, the current state of a shopping cart may be empty. If the shopper adds items to the cart, the component's state changes, causing a re-render to the component which holds the state. Remember that when creating a React application, we should never update state directly. The setter function should continually update state. Many newer React programmers inadvertently update state directly using the filter or other methods in their components. The purpose of changing state via a setter function is so that react can handle the changes accordingly.
useEffect
The use effect hook used in React allows you to use side effects in your React application. The useEffect hook is mainly used for almost everything outside of React and some things inside react. For example, side effects outside of React include using javascript functions like set time out or set interval, rendering dom elements, or fetching data from an external API. Side effects within React would consist of keeping two different sets of state in sync with each other. The dependency array is the second parameter to useEffect function. useEffect relies on three dependencies, nothing, an empty array, and a variable. If no dependency is used, the use effect hook will render every time the page renders. With a variable, the use effect hook will render every time the variable is updated, such as state. An empty array dependency will allow the useEffect hook to only render once. The use effect function will always run as soon as the component loads.
Conclusion
In this post, we learned how state is applied to our application and how to use it. We also went over how and when useEffect is used in our application. Understanding state and useEffect is vital to our React applications.
Top comments (0)