React Hooks: Data Fetching on Component Mount with useEffect

With useEffect we can do data fetching when component is mounted. An example as follows: The useEffect without dependency will run the fetchUsers async function when the component mounted. A better way to write the useEffect here is by adding the fetchUsers function as dependency, this won’t change the functionality but will be more inline with how the useEffect is used in React. So the useEffectwill be like…

Read More »

React Hooks: Manual Data Fetching and useState

Using the setState hook we can store data from fetch API and use it in our functional component. An example for this as follows: When we click on the Fetch Users button, it will run the fetchUsers async function. The function will store its Promise result in setUsers then the users variable will contain the data. Reference:

React Hooks: useEffect

In react hooks we can utilize useEffect hook to add codes that can “observe” the other variables or codes and run the codes inside its callback function. An example here The useEffect here “observe” the changes in buttonToggle variable and when the variable value change it will display an alert in browser window. Reference:

React Hooks: useState

From React there is a new way of managing state in functional components, using hooks. One of it is useState where we can get and set state values in functional components. To utilize useState in our functional components we need to understand its parts. There are two important parts, the variable from useState and function…

Read More »

React Stateless Functional Component

When writing React application we need components to present the application elements. However, often times creating a complete component class might be an overkill for a simple representation, for example a simple button. We can use Stateless Functional Component to simplify how we create a dumb/stateless component Stateless component can only render props, this should…

Read More »