HTML elements have a delayed rendering process in ReactJS

Question

HTML elements have a delayed rendering process in ReactJS

As I dive into learning ReactJS by creating a ReactJS version of my blog, I encountered an interesting issue while testing Google Page Speed. The recommendation to "prioritize visible content" led me to add a placeholder article with a loading message, lorem ipsum description, and a default header image. However, when retesting the page speed, I found that the title, image, and description of the placeholder article were not being rendered. It's puzzling to me why this static text isn't showing up, even after simulating a slow internet connection.

If you want to take a look at the code, it's available on GitHub: https://github.com/erikkubica/reactjs-simple-blog-test. Check out the src/modules/article/ArticleListItemPlaceholder.js and ArticleList.js files for more details.

In addition to the rendering issue with the placeholder article, I also noticed that the logo was missing. This discrepancy between my ReactJS site and a non-React website is confusing, especially since the styles and navigation component are loading correctly.

If you'd like to see the problem in action, visit:

Here's a screenshot of the problem for reference: https://i.sstatic.net/rwqiG.png

I appreciate any explanations, good practices, or tips you may have to offer for further learning.

UPDATE: I was able to resolve the problem.

The issue stemmed from the fact that custom fonts were not loading, causing the text to become invisible. Adding fontFamily: "Arial" to the inline styles of the elements fixed the problem. Special thanks to Mr. Lister for the assistance.

And a big shoutout to John Ruddell for sharing some best practices.

html css reactjs

Answer 1

Answer №1

The problem you're facing is that you're setting state asynchronously but trying to render things in a semi-synchronous manner.

async fetchData() {

    //const response = await fetch("/static/articles.json");

    let data = null; //await AsyncStorage.getItem('@MySuperStore:articles_storage_' + this.state.category);

    if (data === null) {
        const response = await fetch("https://www.netlime.eu/wp-json/get-posts/v2/all/");
        data = await response.json();
        await AsyncStorage.setItem('@MySuperStore:articles_storage_' + this.state.category, JSON.stringify(data));
    }

    try {
        data = JSON.parse(data);
    } catch (e) {

    }
// The issue lies here
______________________________________________
    this.setState({articles: data});

    this.createArticleList();
______________________________________________

// Change this to the following
    this.setState({articles: data}, () => {
        this.createArticleList();
    });
}

Since setState is asynchronous, you're creating the articleList state item before the articles are set on state, causing the UI to not update.

Edit

It's recommended not to use a secondary state variable to hold an array of articles to be rendered. Instead, create them dynamically.

export default class ArticleList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            articles: [],
            category: this.props.category ? this.props.category : 0
        };
    }

    async fetchData() {
        let data = null; //await AsyncStorage.getItem('@MySuperStore:articles_storage_' + this.state.category);
        if (data === null) {
            const response = await fetch("https://www.netlime.eu/wp-json/get-posts/v2/all/");
            data = await response.json();
            await AsyncStorage.setItem('@MySuperStore:articles_storage_' + this.state.category, JSON.stringify(data));
        }

        try {
            data = JSON.parse(data);
        } catch (e) {

        }

        this.setState({articles: data});
    }
    componentDidMount() {
        this.fetchData();
    }
    render() {
        const articles = this.state.articles.map((article) => {
            return (
                <ArticleListItem
                    key={article.ID}
                    article={article}
                />
            );
        });

        return (
            <div>
                { articles.length ? articles : <ArticleListItemPlaceholder/>}
            </div>
        );
    }
}

Answer 2

The problem you're facing is that you're setting state asynchronously but trying to render things in a semi-synchronous manner.

async fetchData() {

    //const response = await fetch("/static/articles.json");

    let data = null; //await AsyncStorage.getItem('@MySuperStore:articles_storage_' + this.state.category);

    if (data === null) {
        const response = await fetch("https://www.netlime.eu/wp-json/get-posts/v2/all/");
        data = await response.json();
        await AsyncStorage.setItem('@MySuperStore:articles_storage_' + this.state.category, JSON.stringify(data));
    }

    try {
        data = JSON.parse(data);
    } catch (e) {

    }
// The issue lies here
______________________________________________
    this.setState({articles: data});

    this.createArticleList();
______________________________________________

// Change this to the following
    this.setState({articles: data}, () => {
        this.createArticleList();
    });
}

Since setState is asynchronous, you're creating the articleList state item before the articles are set on state, causing the UI to not update.

Edit

It's recommended not to use a secondary state variable to hold an array of articles to be rendered. Instead, create them dynamically.

export default class ArticleList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            articles: [],
            category: this.props.category ? this.props.category : 0
        };
    }

    async fetchData() {
        let data = null; //await AsyncStorage.getItem('@MySuperStore:articles_storage_' + this.state.category);
        if (data === null) {
            const response = await fetch("https://www.netlime.eu/wp-json/get-posts/v2/all/");
            data = await response.json();
            await AsyncStorage.setItem('@MySuperStore:articles_storage_' + this.state.category, JSON.stringify(data));
        }

        try {
            data = JSON.parse(data);
        } catch (e) {

        }

        this.setState({articles: data});
    }
    componentDidMount() {
        this.fetchData();
    }
    render() {
        const articles = this.state.articles.map((article) => {
            return (
                <ArticleListItem
                    key={article.ID}
                    article={article}
                />
            );
        });

        return (
            <div>
                { articles.length ? articles : <ArticleListItemPlaceholder/>}
            </div>
        );
    }
}

HTML elements have a delayed rendering process in ReactJS

Answer №1

Edit

Similar questions

Attempting to execute a function within a MAP operation

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Implementing beans within an HTML form action allows for seamless communication between the form and

Preventing the use of double-click on Grooveshark

What is the best way to scale a div proportionally within a bootstrap grid?

Please send the element that is specifically activated by the onClick function

The value of the React prop has not been defined

Show or hide a div based on the visibility of another div in Angular using *ngIf

Aligning content within a div using Bootstrap 4

Decorative initials have a tendency to create spaces within the text

Encountering an issue with accessing the URL http://localhost:3000/api/products as it returns a 404 (Not Found)

Trouble with HTML2PDF.js - download not being initiated

Unable to delete product from shopping cart within React Redux reducer

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

Whenever I try to open my jQuery UI Dialog without first displaying an alert, it does not work

Differentiate the items within a list containing identical divs using JavaScript

Design a sophisticated background using CSS

"Enhancement in Chrome: Inclusion of Origin header in same-origin requests

Struggling to locate the distinctive XPath for the button

Shifting the position of personalized tabs using Jquery