In computer science, especially in functional programming, there are functions called 'pure functions'. These functions have two properties:

- They don't modify variables that existed before they were called.
- They always return the same output from the same inputs.

React follows the same pattern, in that with the same props, we need to return the same JSX.

Purity: Components as formulas in React Js

React rendering process must always be pure. Components should return the same JSX and not modify variables that exist before rendering.

Example of impure component:
```js
let count = 0;
export function Counter() {
  count += 1; // Bad: Can't a preexisting variable!
  return <h2>Counter: {count}</h2>;
}
```

Example of pure component:
```js
export function Counter({count}) {
  // This component will return same JSX
  return <h2>Counter: {count}</h2>;
}
```

Side Effects: (un)intended consequences in React JS

- Components can run in different environments, for example, on a server, as long as they return the same result from the same inputs.
- You can improve performance by skipping rendering; this is safe since the component always returns the same results from the same inputs.
- If some data changes in the middle of rendering, React can stop the calculation and recalculate again. Purity makes it safe to stop the calculation at any time.

Why does React Js care about purity? 

Some JavaScript functions are pure functions. A pure function does only one thing and returns the same output for the same input. By building only pure functions, you can avoid confusing bugs and unpredictable behavior as your codebase grows.

University of Michigan - Ann Arbor

The UI can be described in small units like buttons, titles, and other elements. With React, we can combine these elements into reusable and nestable components. React allows us to:

- Create Component
- Importing and Exporting Components
- Writing Markup with JSX
- JavaScript in JSX with Curly Braces
- Passing Props to a Component
- Conditional Rendering
- Rendering Lists
- Keeping Components Pure

Describing the UI in React

https://react.dev/learn/keeping-components-pure

Keeping Components Pure in Reat Js

Conditional rendering works the same as JavaScript's if statement and ternary operators.

```jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.state;
  }

  render() {
    if (this.state) return <div>State is true</div>
    return <div>State is false</div>
  }
}
```

Conditional Rendering

JSX is a syntax extension to JavaScript that is used to produce React components. Its syntax is similar to that of HTML. You can use any valid JavaScript expression inside the curly braces. Additionally, you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. 

You can also pass attributes and children. JSX is the representation of objects, and Babel compiles JSX to **React.createElement()** which returns an object.

This is an example
```tsx
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
```

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 
The simplest way to define a component is to write a JavaScript function
```jsx
const Welcome = (props) => <h1>Hello, {props.name}</h1>
```
Also, you can define it in classes. We can pass properties through an object called **props**. You can also pass other components and split them into smaller components like this:

```jsx
const Header = () => <header>Header</header>
const Main = (props) => <main>Hello {props.name} 🏈</main>
const Footer = () => <footer>Footer</footer>

const Page = () => <div>
    <Header/>
    <Main name={'Jimy'}/>
    <Footer/>
</div>
```

Components and Props

To display an array of elements in React, you can use array methods like `map` and `filter` to generate an array of React components, which can then be rendered.

Each item in the array should be given a unique key to enable React to differentiate between elements and components.

```jsx
// 1. Move data into an array
const cakes = [
  { id:'01', name:'Chocolate Cake' },
  { id:'02', name: 'Red Velvet Cake' },
  { id:'03', name: 'Vanilla Cake' },
]

// 2. Map into a new array of JSX nodes
const listItems = cakes.map(cake => <li key={cakes.id}>
  {cakes.name}
</li>);

// 3. return a list of elements
// wrapped in a `ul` component
return <ul>{listItems}</ul>;
```

Learn Before

Related

Learn After