useProjectState()

Using useProjectState in Modularjs

Modularjs also supports project-specific persistent state using the useProjectState hook. This hook works similarly to useGlobalState, but the data is scoped to the current project only.

---

What Is useProjectState?

While useGlobalState shares state across all projects, useProjectState restricts the shared state to only the current project. This is useful when you need state that should persist between sessions but should not be visible or shared across other projects.

---

Example: Project-Specific Counter

module.exports = ({ useProjectState }) => {
  const [count, setCount] = useProjectState('countz', 0);

  return (
    <div>
      <h1>Project Counter</h1>
      <p>Countz: {count}</p>
      <button onClick={() => setCount(countz + 1)}>Increment</button>
    </div>
  );
};

Here, the count state is saved only for the current project. Opening another project won't affect or display this state — each project has its own isolated count value.

---

Syntax

const [state, setState] = useProjectState('unique-key', defaultValue);

• 'unique-key' is required. It uniquely identifies the value within the project.

• defaultValue is used only if no saved value exists yet for that key.

---

Why Use useProjectState?

• Project Isolation: Keeps data separate between projects.

• Persistent: Saves automatically and is retained across sessions.

• Reactive: Triggers re-renders like useState or useGlobalState.

---

useGlobalState vs. useProjectState

Feature	useGlobalState	useProjectState
Scope	All projects	Current project only
Persistence	Yes (cross-project)	Yes (per-project)
Use Case	Global settings, shared logic	Project-specific counters, configs

---

Best Practices

• Use useProjectState for:

  • Per-project configurations

  • Project-specific UI states (like tabs, toggles)

  • Data that shouldn’t affect other projects

• Avoid using it for:

  • Data that must persist across all projects (use useGlobalState instead)

---

Summary

useProjectState is the go-to hook when you need persistent, scoped state for a specific project in Nexo Maker. Just remember to provide a unique key:

const [value, setValue] = useProjectState('my-key', initialValue);

And enjoy the flexibility of modular, project-aware components in your expansions!