Change state on Server Actions in NextJS 13?

Programming
, , , ,
1

I am trying to change the state called someState to true inside the server action called myAction after a form is submitted in a page component in NextJS 13. I have tried passing the setSomeState function as a parameter for myAction, but NextJS 13 does not accept it. I would appreciate any help in solving this issue.

2

To pass the setSomeState function to the server action myAction in NextJS 13, you can use the useCallback hook to create a memoized version of the function. Here is an example:

import { useCallback } from 'react';

const PageComponent = () => {
  const setSomeState = useCallback((value) => {
    // logic to update someState
  }, []);

  const handleSubmit = () => {
    // logic to handle form submission
    myAction(setSomeState);
  };

  return (
    // JSX for your page component
  );
};

By wrapping the setSomeState function with useCallback, it will create a new instance of the function only when its dependencies change. The empty dependency array [] ensures that the function is memoized and doesn’t change across re-renders.

Then, you can pass the memoized setSomeState function as a parameter to myAction inside the handleSubmit function. Make sure to implement the logic to update someState within the myAction function.

Note: You need to import useCallback from the react package.