Tauri not detecting React state change

[dchicchon]

I created a basic texteditor with React + Vite and I am trying to save my file using the tauri fs api. For awhile it was working fine but now when I try to save my text state it detects no change. To check, I ran this on my browser and it worked there. Maybe something is lost in the compilation state?

In addition, if I start my fileText state with a default value, it works but never gets updated.

Here's my code

import React, { useState, useEffect } from "react"
import { writeFile, readTextFile } from "@tauri-apps/api/fs";
import { save } from "@tauri-apps/api/dialog";
import hotkeys from "hotkeys-js";
import "./App.css"

const SAVE_FILE_HOTKEY = "ctrl+s, command+s";

function App() {
  const [ypadding, setYPadding] = useState(30);
  const [xpadding, setXPadding] = useState(25);
  const [fontSize, setFontSize] = useState(25);
  const [backgroundColor, setBackgroundColor] = useState("#282c34");
  const [color, setColor] = useState("white");
  const [fileText, setFileText] = useState("");

  useEffect(() => {
    registerHotkeys();
  }, [])

  const registerHotkeys = () => {
    // enable hotkeys for input/textarea
    // this runs every time a hotkey is pressed. We want to allow all so return true
    hotkeys.filter = (event) => true
    hotkeys(SAVE_FILE_HOTKEY, saveFile)
  }

  const saveFile = async () => {
   // This is where it fails, fileText is empty and cannot save the file
    console.log(fileText);
    if (fileText.length === 0) {
      console.log("No fileText to save")
      return
    }
    const path = await save({
      title: "Save Text File",
      filters: [{ name: 'untitled', extensions: ["txt"] }],
    })
    if (!path) return;
    let fileName = path.split("/").find(item => item.includes("."))
    console.log(fileName);
    let newFile = {
      path,
      contents: fileText
    }
    writeFile(newFile)
      .then((result) => {
        console.log("saved successfully")
      }).catch((err) => {
        console.error(err)
      })
  }

  return (
    <div>
      <textarea
        className="paper"
        style={{
          color,
          backgroundColor,
          fontSize: `${fontSize}px`,
          padding: `${ypadding}px ${xpadding}px`,
        }}
        value={fileText}
        onChange={e => setFileText(e.target.value)}
      >
      </textarea>
    </div>
  )
}

export default App

I also ran tauri --info to get the following:

Operating System - Mac OS, version 12.3.0 X64

Node.js environment
  Node.js - 16.13.1
  @tauri-apps/cli - 1.0.0-rc.6 (outdated, latest: 1.0.0-rc.8)
  @tauri-apps/api - 1.0.0-rc.2 (outdated, latest: 1.0.0-rc.3)

Global packages
  npm - 8.1.2
  pnpm - Not installed
  yarn - Not installed

Rust environment
  rustup - 1.24.3
  rustc - 1.60.0
  cargo - 1.60.0
  toolchain - stable-aarch64-apple-darwin 

App directory structure
/dist
/node_modules
/src-tauri
/.git
/src

App
  tauri - 1.0.0-rc.6
  tauri-build - 1.0.0-rc.5
  tao - 0.7.0
  wry - 0.14.0
  build-type - bundle
  CSP - unset
  distDir - ../dist
  devPath - http://localhost:3000/
  framework - React

[dchicchon]

Just in case someone has this same issue, I was able to get my code working when I used useRef rather than useState hook.

Turns out my main issue was using the registerHotkeys function. Since I only called it once, it was not getting the updated state values. In order to fix this I also created an unregister function.

import React, { useState, useEffect, useRef } from 'react'
import { writeFile, readTextFile } from '@tauri-apps/api/fs';
import { open, save } from '@tauri-apps/api/dialog';
import hotkeys from 'hotkeys-js';
import './App.css'

const OPEN_FILE_HOTKEY = 'ctrl+o, command+o';
const SAVE_FILE_HOTKEY = 'ctrl+s, command+s';

function App() {
  const textRef = useRef()
  useEffect(() => {
    registerHotkeys();
  }, [])

// useEffect(() => {
   unregister();
})

// run this with useEffect
  // const unregister = () => {
       hotkeys.unbind();   
   }

  const registerHotkeys = () => {
    // enable hotkeys for input/textarea
    // this runs every time a hotkey is pressed. We want to allow all so return true
    hotkeys.filter = (event) => true
    hotkeys(OPEN_FILE_HOTKEY, openFile)
    hotkeys(SAVE_FILE_HOTKEY, saveFile)
  }

  const saveFile = async () => {
    const { current: { value: text } } = textRef
    if (text.length === 0) {
      console.log('No fileText to save')
      return
    }
    const path = await save({
      title: 'Save Text File',
      filters: [{ name: 'untitled', extensions: ['txt'] }],
    })
    if (!path) return;
    let fileName = path.split('/').find(item => item.includes('.'))
    let newFile = {
      path,
      contents: text
    }
    writeFile(newFile)
      .then((result) => {
        console.log('saved successfully')
      }).catch((err) => {
        console.error(err)
      })
  }

  const openFile = async () => {
    // check if there is any fileText, if so ask the user if they want to save the current file
    let path = await open({
      title: 'Open Text File',
    })
    if (!path) return;
    let fileName = path.split('/').find(item => item.includes('.'))
    let fileText = await readTextFile(path)
    setCurrentFile({ path, name: fileName })
    textRef.current.value = fileText
  }

  return (
    <div>
      <textarea
        className='paper'
        ref={textRef}
        autoFocus={true}
      />
    </div>
  )
}