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.
An even more elegant option is to use the callback form of `useState`. If you pass it a function, that function will be called only when the initial state needs to be calculated - that is, on the initial render:

```
const [path, setPath] = React.useState(heavyCalculation);

```

```js
const heavyCalculation = () => {
  console.log('doing heavy calculation');
  return 0;
};

const App = () => {
  const [path, setPath] = React.useState(heavyCalculation);
  React.useEffect(() => {
    setInterval(() => {
      setPath(path => path + 1);
    }, 1000);
  }, []);
  return 'Path is: ' + path;
};
ReactDOM.render(<App />, document.querySelector('.react'));
```

```html
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>
```

As you can see in the snippet above, `doing heavy calculation` only gets logged once.