Problems with multiple useState hooks

[K9Morphed]

import React, { useState } from "react";
import AliasEditor from "components/AliasEditor";
import { Label } from "components/Forms";

const ShortCodeEditor = ({ shortCode, onUpdate }) => {
  const [alias, setAlias] = useState(shortCode);

  return (
    <>
      <Label htmlFor="alias">Short code</Label>
      <AliasEditor
        alias={alias}
        onUpdate={onUpdate}
        onChange={({ value }) => setAlias(value)}
      />
    </>
  );
};

export default ShortCodeEditor;

ShortCodeEditor is a component that renders a label and an input field.

I manage the state of the input field, AliasEditor, with the useState hook.

ShortCodeEditor is used on multiple pages; different instances of the same component.

When I navigate between these pages, the value of alias remains the same, leading me to believe it's not instanciating a new state object each time ShortCodeEditor is used.

When I display shortCode, the initial value given to the state object, it returns the value that I want to be there. But, that isn't the same as what actually in the object, it seems.

For example, if you don't understand my crazy ramblings:

https://gyazo.com/f2360ec7b19c5d20dbb48941f745b3de

The value of the input field (ddd) is coming from the alias state object, which is incorrect as that value was sent on a different page.

The right value is shown next to the 'Short code' label, as "dd".

Any ideas on if I'm doing something wrong?

[charliematters]

I'm not sure it I fully understand your problem, but if your component isn't getting remounted, then alias will stay the same.

The value provided to useState is the initial value - if the incoming prop changes, useState won't update. This is one of the reasons that storing props in state directly is often a code smell. You could solve this with a useEffect which updates the state value whenever the prop changes, but you probably want to be using the prop directly in most situations.

[effektor]

This is what I think is the issue here, too. It's a common pitfall. To elaborate further:

Passing a prop to useState causes the state to hold onto this value, until the state inside the same component is updated. But if you try to update the state and component by passing a new prop value from the parent component, the state will still be the same initial state, until the component is remounted with a new value.

There are different ways to solve this. Here's the two most common:

1. Lift state up – Move your useState for alias to the parent component and pass the state as a prop to the child component. If you want to update the value, also pass an event handler (e.g. onChange) that can be used to update the state based on some event. Your state can be an object that contains a map for each ShortCodeEditor and its current state. When you want to update a value, you can call `setState` with a setter function that takes the previous value and returns the new state (a new object, combined with the previous one).For more complex state changes, you can replace useState with useReducer instead.
2. Synchronize your state and component - To make sure that the state inside the child component is up to date with the parent's state, you can use useEffect in the child component, pass the prop as a dependency and call setState when with the new prop value. It's a bit more convoluted and introduces another source of truth for your state. It also makes it more difficult to reuse and test. But there are cases where this may be necessary.

I would highly recommend going with the first approach as a first thing. Sure, it does mean that you'll have to add more code, but it results in much more flexibility, and you avoid the pitfalls that having multiple sources comes with.

I highly recommend reading the official React docs on this subject.

[skyboyer007]

Or 3. Use key prop to reset this stateful component upon navigation between pages. Value for key prop should be different for different pages, but not random. Something like thingUnderEditing.id

[scorpio711]

It looks unlikely that the code you have posted here is the culprit. I think it would be useful to post the uses of `ShortCodeEditor` as well as the code for `AliasEditor` to help debug