DEV Community: MAXWELL KIMAIYO

What is Render in React and How Do You Force it?

MAXWELL KIMAIYO — Sat, 21 Nov 2020 17:40:14 +0000

What is Render in React?

React takes over the manipulation of DOM with the use of the React.createElement function so that we don’t have to do it manually. Instead, updates are done only when needed. We only describe how we want the DOM to look with JSX or pure createElement function, and React creates a virtual representation of DOM. Then, based on it, the real DOM will be updated whenever there are differences after the state changed. What’s more, if there are many DOM updates scheduled, React can batch them for efficiency. Nevertheless, this whole process consists of three stages: Render, Reconciliation, and Commit.

Render – React calls the render function to gather output from createElement functions
Reconciliation – New elements are compared against previously given elements and the virtual DOM is updated if there are differences
Commit – The real DOM is updated

Like I mentioned before, changing the state does not mean that the commit phase will be executed, as there will be no need for it if there were no changes in the virtual DOM. As you can see in the example below, no matter how many times we click the button, the name property is set to the same value, despite the fact that we call the setState method.

class App extends Components {  
    state = {
    name: ‘Thomas’
}

    onClickHandler = () => {
        this.setState({name: ‘Thomas’})
}

    render() {
        <div>
            <p>My name is {this.state.name}</p><br/>
            <button onClick={this.onClickHandler}>Click me</button>
        </div>
    }
}

If you put a console log in the render function, you will see that it will be called. However, if you check the DOM in the inspector, you won’t see a flash that indicates a change in DOM. Now, let’s talk about how we can trigger a re-render.

Forcing Re-render of a Component in React

If you are using a React class component then it is as easy as using this.forceUpdate() function.

class App extends Components {  
    onClickHandler = () => {
        this.forceUpdate()
}

    render() {
        <button onClick={this.onClickHandler}>Click me</button>
    }
}

Just make sure that this context refers to the component instance. In the example below, this refers to the scope of the inner function and not of the React component instance, and because of that, it won’t work.

// This won’t work
class App extends Components {  
    onClickHandler = () => {
        function innerFunction() {
            this.forceUpdate()
        }
        innerFunction()
}

    render() {
        <button onClick={this.onClickHandler}>Click me</button>
    }
}

Now you know how easy it is, but be aware that in 99.99% of cases you should not need it. If you do, then you might be doing something wrong, and probably there is a better solution to what you are trying to achieve. The benefit of the force update function over setState is the fact that it will update a component even if the shouldComponentUpdate lifecycle hook is implemented.

If you are updating state values, but they are not rendered correctly, then instead of providing a new value, you might be directly mutating the current state. There is also a possibility that you are passing the same reference. Remember that when updating the state, you should always provide a new value. For example, strings are immutable; however, objects and arrays are passed as a reference, so:

/ Equality check is done by checking if values are the same
const str1 = ‘hello’
const str2 = ‘hello’

str1 == str2    // true

// Equality check is performed by checking if values have the same reference
const obj1 = {str: ‘hello’}
const obj2 = {str: ‘hello’}
const obj3 = obj1
ob1 == obj2 // false
obj3 == obj1    // true

Forcing a Re-render in a Functional Component

In a function component, there is no forceUpdate method. However, we can mimic this functionality with the code below.

import React, {useState} from ‘react’

const App = props => {
const [count, setCount] = useState(0)
const onClickHandler = e = => {
    setCount(prevCount => prevCount + 1)
}

return (
    <button onClick={onClickHandler}>Click me</button>
)
}

As you can see, whenever we need the component to be re-rendered, we just increment the counter. To be honest, we can go even further than that and create a custom hook for it.

import React, {useState} from ‘react’

const useForceUpdate = () => {
    const [count, setCount] = useState(0)

    const increment = () => setCount(prevCount => prevCount + 1)
    return [increment, count]
}

const App = props => {
const [forceUpdate] = useForceUpdate()

const onClickHandler = e => {
    forceUpdate()
}

return (
    <button onClick={onClickHandler}>Click me</button>
)
}

Now you have seen how to force re-render of a component. If for any reason you would like to re-render a child component from a parent, then you can do it by changing its prop as shown below.

const ChildComponent = props => {
    return (
        // child markup
)
}

const App = props => {  
const [forceUpdate, forceUpdateValue] = useForceUpdate()

const onClickHandler = e => {
    forceUpdate()
}

return (
    <div>
        <ChildComponent key={forceUpdateValue} />
        <button onClick={onClickHandler}>Click me</button>
    </div>
)
}

In this article, we covered what render is in React, what happens when state is updated, and how to force a re-render in class and functional components. For the final note, remember, if you ever think that you need to force a re-render, think again as there might be a better way.

Deploy React Apps for Free With Firebase Hosting

MAXWELL KIMAIYO — Sat, 21 Nov 2020 11:43:42 +0000

With the rise of cloud computing, hosting web apps on services like Heroku, AWS, Azure, Netfliy, and many more have been on the rise. Amidst all these options, Firebase has emerged as a great solution to host serverless web apps. It's easy, pretty fast, and Free! You don't need a lot of working to have your website running.

Getting Started

In this tutorial, I'll take you through all the steps involved in deploying a React app on firebase.

Prerequisites:

A firebase project set up. If you don't have one, create one using the firebase console.
A React app set up that you wish to deploy.

Getting Your React App Ready for Deployment

Run the following command to create a build directory with a production build of your app:

$ npm run build

Inside the build/static directory will be your JavaScript and CSS files. To know more about React production builds, refer to the
production build
section of the create-react-app docs.

Configuring Firebase

Install Firebase CLI
To host your site with Firebase Hosting, you need the Firebase command-line tool (CLI). Run the following npm command to install the CLI on your system globally

$ npm install -g firebase-tools

Login to Firebase

Make sure you're in the root directory of your React app and run the following command to log in to firebase in your terminal:

$ firebase login

If you're not logged in, you'll be asked to enter the credentials for your google account.

Initiate your project

Now that you've got the firebase CLI configured, it's time to initialize firebase in your react app. Run the following command:

$ firebase init

You will now enter the firebase tools shell and will be prompted with a sequence of questions and various configuration options. Let's go through these questions together step by step to achieve our desirable configuration.

Select the firebase project that you created

Specify the build that we created in the previous section, to be used as your project's public directory.
Select whether or not you need your firebase app to be configured as a single-page app. I'm selecting Yes in my case.
As we've already created a build directory in our previous section, therefore build/index.html already exists. We would want to let it be as is and enter No for this question.

This marks the end of our configuration process and our app is now ready to deploy!

To verify the successful completion of the initialization process, simply check the presence of .firebaserc and firebase.json files. These are automatically created by firebase during the initialization process.

Deploy to Firebase

Just run the following command to deploy your app:

$ firebase deploy

Firebase will now run the deploying process and will give you a unique URL where your app is deployed. For e.g. in my case, it was https://developer-kimaiyo.web.app

Voila! Your ReactApp is now deployed with Firebase hosting.

To know more about Firebase hosting, refer to the hosting section of the firebase docs.

How to Organize Your React/Redux Projects

MAXWELL KIMAIYO — Sun, 25 Oct 2020 14:38:31 +0000

Introduction

React is one of the most unopinionated frontend frameworks in existence. From the selection of states, and routing to managing your code structure, React doesn't provide any guidance on how to structure your project - and that can be really confusing for developers.

Here is the best way you can structure you react/redux app


└──src/
     │
     ├──actions
     │       ├── Post.action.js
     │       └── User.action.js
     ├── components
     │       ├── Header.js
     │       ├── Footer.js
     │       └── Error.js
     ├── containers
     │       ├── PostContainer.js
     │     ├── LoginContainer.js
     │       └── RegisterContainer.java
     ├── constants
     │       ├── User.constant.js
     │       └── Post.constant.js
     ├── images
     │       ├── user.jpg
     │       └── post.png
     ├── reducers
     │       ├── Post.reducer.js
     │       └── Pser.reducer.js
     ├── style
     │       └── Main.css    
     ├── util
     │       ├── Store.js
     │     └── authUtils.js
     ├── views
     │       ├── Home.js
     │      ├── Register.js
     │       └── Login.js
     │
     ├── index.js
     └── root.js

Directory functions, in brief, include the following:

components - Contains all 'dumb' or shared components, consisting only of JSX and styling.
containers - Contains all corresponding components with logic in them. Each container will have one or more components depending on the view represented by the container. For example, PostContainer.js would have a Header.js as well as Footer.js.
images - Contain all Images that will be imported inside a component
actions - All Redux actions
reducers - All Redux reducers
style - This is where you include all of your main stylings
utils - Other logical codes that are not React specific. For example, authUtils.js would have functions to process the JWT token from the API to determine the user scopes and store.js which simply is the Redux store.
view - keeps app pages or screens (route endpoints)
routes.js - aggregates all routes together for easy access.

Note: Defining all routes in a single file has been deprecated as a practice, according to new React Router docs. It promoted segregating routes into components for better readability. Check React Router Docs for a better understanding.