Question: I want one yaml if at all possible. However, the circumstances dictate that this single yaml will have auto triggers for certain branches (develop/release), but still can be manually built by any other branch qa wishes to test (i.e. they want to test a feature branch, they can build it using this yaml).

I need to dynamically set the buildconfig property.

I have:

```
trigger:
  branches:
    include:
      - develop
      - release/*
      - Release/*

pool:
  name: 'my-agent'

variables:
  isRelease: $[contains(variables['Build.SourceBranch'], 'release')]

if {{$(isRelease)}}:
  buildConfiguration: 'Release'

```

// if not release then set build config to '`Debug`' but I'm struggling with the syntax. I can't find a `not` operator working well, or `notIn`...can someone help with this?

Answer: 
I would extract the code to its own component, and then that component can use one of several possible techniques to remember the value from its first render. Here's one with `useMemo`:

```
{posts.map(item => <Post item={item}/>)}

//... elsewhere:
const Post = ({ item }) => {
  const time = useMemo(() => {
    return timeCalc(item.datePosted);
  }, []);

  return (
    <div>
      <div>
        <h1>{item.title}</h1>
        <h3>{item.comment}</h3>
      </div>
      <div>
        <h3>{time}</h3>
      </div>
    </div>
  );
}

```

Other possible ways to remember the initial value are with state:

```
const Post = ({ item }) => {
  // Note that i have no need for `setTime`, as this value will never be changed
  const [time] = useState(timeCalc(item.datePosted));

```

Or with a ref:

```
const Post = ({ item }) => {
  const timeRef = useRef(timeCalc(item.datePosted));

  // ...
  <h3>{timeRef.current}</h3>

```
You can create a component and *memoize* it using `React.memo` and `areEqual` function to **avoid** re-rendering when props i.e. date are same.

**Demo:**

```js
const inputDate = new Date().toISOString();

function timeCalc(date) {
  return moment(date).fromNow()
}
function TimeCalc({date}) {
  return <h4>{timeCalc(date)}</h4>
}
function areEqual(prevProps, nextProps) {
  return prevProps.date === nextProps.date
}
const TimeCalcMemo = React.memo(TimeCalc, areEqual);

function App() {
  const [v, sv] = React.useState('')
  return (<div>
    <div>{v}</div>
    <div>Enter something after a minute</div>
    <input type="text" value={v} onChange={e => sv(e.target.value)} />
    <TimeCalcMemo date={inputDate}/> memoized
    <TimeCalc date={inputDate}/> not memoized
  </div>)
}

ReactDOM.render(<App />, document.getElementById('mydiv'))
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="mydiv"></div>
</body>
```