Development Note

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 »

Parallel Fetch Requests using Promise.all()

When we need to do multiple fetch requests we can use Promise.all() to make our fetch promises parallels, which can improve the app performance. An example of this as follows: Reference:

JavaScript Truthy and Falsy

JavaScript does type conversion when evaluating various data types in Boolean contexts. For example: The name variable will be have Skywalker string as its value because the jedi was evaluated as truthy. Other type of coercion, falsy, also happens when non Boolean data types which identified as false evaluated in Boolean context, for example: In…

Read More »

JavaScript Fetch

We can send or get data from remote server using Fetch API in JavaScript. The fetch method will retrun a Promisewhich will need to be handled using Promise .then or the syntactic sugar async-await. An example of GET request, a method for getting data from server: An example of POST request, a method for sending data to a server: An example of PUT request, a method for…

Read More »

ES6 Basics: Arrow Function Expression

ES6 introduced a new way to express function in our codes, arrow function. It is a more compact way of expressing function with some bits of difference with regular function. Before ES6, we can do something like this to make a function: In ES6 we can do the same thing with the following syntax: It…

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 »