React screen update from a loop process

Question

I'm creating a React app that reads data from a text file and I want to display the processing progress.

I perform multiple data transformations in sequence (as they are dependent on each other) and I want to have a progress bar for each of the processing.

I have a progress component that works as expected but I'm not able to update the progress whilst it's happening, all bars are fully filled after the whole process finishes.

From what I can see, React is queueing all state updates and rendering everything in the end.

So, this is what I have at the moment: Analysis.js

export function Analysis ({ onError, whatsapp }) {
  const [baseContent, setBaseContent] = useState(0)
  const [chatContent, setChatContent] = useState(0)
  const [splitMessages, setSplitMessages] = useState(0)

  function onSetBaseContent (value) {
    setBaseContent(value || baseContent + 1)
  }
  function onSetChatContent (value) {
    setChatContent(value || chatContent + 1)
  }
  function onSplitMessages (value) {
    setSplitMessages(value || splitMessages + 1)
  }

  const whatsappCallBacks = { onSetBaseContent, onSetChatContent, onSplitMessages }
  useEffect(() => {
    whatsapp.setData(whatsappCallBacks)
  }, [])

  return (
    <>
      
        
          Analysing...
        
      
      
        
        
          
          
          
        
        
      
    
  )
}

whatsapp is an instance of the Whatsapp class created before.

The Progress component simply has a bar that goes up to 100% width, and it's tested and working.

Here is the important part of the Whatsapp class

Whatsapp.js

...
  async setData ({ onSetBaseContent, onSetChatContent, onSplitMessages }) {
    this.setBaseContent(onSetBaseContent)
    this.setMessages(onSetChatContent, onSplitMessages)
  }

  setBaseContent (onSetBaseContent) {
    this.content = this.file.content.replace(/
/, '
').replace(/
/, '
').split('
')
    onSetBaseContent(100)
  }

  setMessages (onSetChatContent, onSplitMessages) {
    // Read each line and put them as a string entry. If the line does not match
    // the messageRegEx, includes in the previus entry with a line break
    let percentage = Number((this.content.length / 100).toFixed())
    for (let i = 0; i < this.content.length; i++) {
      if (i % percentage === 0) {
        onSetChatContent()
      }
      const message = this.content[i]
      if (message.match(this.messageRegEx)) {
        this.messages.push(message)
      } else {
        // Join the lines that are continuation of the previus message
        this.messages[i - 1] += `
${message}`
      }
    }
    onSetChatContent(100)
    const contact = new Contact()
    const replacementsFileContent = []

    this.setDateFormat()

    percentage = Number((this.messages.length / 100).toFixed())
    let i = 0
    // Replace each entry by the Message instance and remove the null entries
    this.messages = this.messages
      .map(m => {
        if (i % percentage === 0) {
          onSplitMessages()
        }
        i++
        const split = this.contentSplitRegex.exec(m)
        if (!split) {
          return null
        }

        const date = this.dateFormat === dateFormat.DAY_MONTH_YEAR
          ? `${split[1]}/${split[2]}/${split[3]} ${split[4]}:${split[5]}:${split[6]}`
          : `${split[2]}/${split[1]}/${split[3]} ${split[4]}:${split[5]}:${split[6]}`

        let cont = Contact.clean(split[7])
        const content = split[8]

        const replaced = contact.replace(cont)

        if (!replaced && !replacementsFileContent.find(r => r === cont)) {
          replacementsFileContent.push(cont)
        } else if (replaced) {
          cont = replaced
        }
        return new Message(date, cont, content)
      })
      .filter(messsage => messsage != null)
    onSplitMessages(100)

    if (replacementsFileContent.length > 0) {
      Contact.saveReplacements(replacementsFileContent)
    }

    if (this.messages.length === 0) {
      throw new Error('Failed to read messages from the file')
    }
  }

Debugging the code I can see the state updates are called correctly, but the progress is only updated (up to 100) all at the same time after the whole processing finishes.

Here's a video I recorded with the result

I already tried some "techniques" to force React to update: setTimeout, setInterval, updateState, moving things inside useEffect and nothing so far worked as they should.

I'm about to give up on react and do it using vanilla JS.

Source code here.

React screen update from a loop process

0 Answers