[Content]: using doubleCount variable twice is not possible

[alexmuzenhardt]

📚 Subject area/topic

/guides/state-management.mdx

📋 Page(s) affected (or suggested, for new content)

https://docs.solidjs.com/guides/state-management#derived-state

📋 Description of content that is out-of-date or incorrect

In this section doubleCount is used twice as a variable name. This is not possible. It is not just a typo, therefore, I opened this issue instead of a direct PR.

Snippet:

function Counter() {
  const [count, setCount] = createSignal(0);
  const [doubleCount, setDoubleCount] = createSignal(0);

  const increment = () => {
    setCount((prev) => prev + 1);
  };

  createEffect(() => {
    setDoubleCount(count() * 2); // Update doubleCount whenever count changes
  });

  const doubleCount = () => count() * 2

  return (
    <>
      <div>Current count: {count()}</div>
      <div>Doubled count: {doubleCount()}</div>
      <button onClick={increment}>Increment</button>
    </>
  );
}

Snippet:

function Counter() {
  const [count, setCount] = createSignal(0)

  const increment = () => {
    setCount(count() + 1)
  }

  const doubleCount = () => count() * 2
  const doubleCount = () => {
    console.log('doubleCount called')
    return count() * 2
  }

  return (
    <>
      <div>Current count: {count()}</div>
      <div>Doubled count: {doubleCount()}</div>
      <div>Doubled count: {doubleCount()}</div>
      <div>Doubled count: {doubleCount()}</div>
      <button onClick={increment}>Increment</button>
    </>
  )
}

Suggestions:

• Changing the variable name
• Changing the examples to be more precise. (I think in the example it is not needed to have two doubleCount variables.

If it is fine, I would create a slightly adjusted example for this section and make a PR as proposal.

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[alexmuzenhardt]

The examples with using memo are fine and I would leave them as they are.

[mizulu]

@alexmuzenhardt
is this what you see ? ( are you able to see the diff format ?)

is the concern is that when you select-copy the code you expect it to be runnable?

[LadyBluenotes]

Hello @alexmuzenhardt !

Appreciate the feedback! I think this might be one of those cases where making the code copy-paste runnable isn't totally practical. The snippet is really meant more for demonstration. That is, to show how a derived signal can be used instead of introducing an extra signal and a createEffect.

That said, I’m going to go ahead and close the PR for now. If this happens to be an issue related to how the code snippet is running, though, please let us know in another issue!

[alexmuzenhardt]

I disagree with that. In my opinion, every code in the docs should be runnable. It is not a good practice to show code that is actually not working. However, I accept the decision.

Best regards
Alex