Question: The snippet shows my html and js. In my php controller I just print\_r($\_POST) but I only see the form data for myName I can't figure out how to access zzz

UPDATE: I added some code to make sure the send request is complete. However, if I don't submit the form the controller doesn't execute from just issuing the xhttp request. I still can't get any js data into php. I could create hidden inputs and fill those in from js and the submit but that seems ugly. can someone help?

```js
function swagSend() {
  event.preventDefault();

  var xhttp = new XMLHttpRequest();

  xhttp.open("POST", "https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/php/send_email.php", true);
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      console.log(xhttp.responseText);
    }
  }

  var henry = "henry"
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("zzz=" + henry);

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {

      document.getElementById("myForm").submit();

    }
  }
}
```

```html
<form action="https://www.sustainablewestonma.org/wp-content/themes/twentytwelve-child/php/send_email.php" method="POST" id='myForm'>

  <input type='text' name='myname'>
  <button type='submit' value='submit' onClick=swagSend();>Submit</button>

</form>
```

Answer: 
When you pass a value to `useState` that value is used to initialize the state. It does not get set every time the component rerenders, so in your case the `path` is only ever set when the component mounts.

Even if the props change, the `path` state will not.

As your initial state depends on a prop, all you need to do is pull the relevant prop out of your props and pass it to the function that calculates the initial `path` value:

```
const Figure = (props) => {
  // get relevant prop
  const { importantProp } = props;

  // path will never change, even when props change
  const [path] = useState(calculatePath(importantProp));

  return(
    <G>
      <Path d={path} />
    </G>
  )
}

```

However, the `calculatePath` function still gets evaluated every render, even though the `path` value is not re-initialized. If `calculatePath` is an expensive operation, then consider using `useMemo` instead:

You can ensure that `path` is updated only when a specific prop changes by adding that prop to the dependency array:

```
const Figure = (props) => {
  const { importantProp } = props;

  const path = useMemo(() => calculatePath(importantProp), [importantProp]);

  return(
    <G>
      <Path d={path} />
    </G>
  )
}

```

And in that case, you don't need state at all.

Adding the `importantProp` to the `useMemo` dependency array means that every time `importantProp` changes, React will recalculate your `path` variable.

Using `useMemo` will prevent the expensive calculation from being evaluated on every render.

I've created a [CodeSandbox example](https://codesandbox.io/s/boring-sun-ze3du) where you can see in the console that the path is only re-calculated when the specified prop `important` changes. If you change any other props, the `path` does not get recalculated.
You can use the hook **useMemo**, it returns the value to your const, it receives the function that returns the value and also an array, send an empty one to calculate just once, you can send some dependencies, props or state if needed to recalculate the value when they change.

In your case you can do something like this:

```
const Figure = (props) => {
    const path = React.useMemo(() => {
      // calculate and return value for path
    }, []);

    return(
        <G>
            <Path d={path} />
        </G>
    )
}

```

It was created for that porpuse.

Hope it helps ;)!