Simplicity &amp; Aesthetics over Complexity 
Life is too sweet to be loosing sleep over trying to understand how a library or framework works, as long as a solution or library is working and has long term support I'm okay with it
<h2>
 <a name="recoil-js" href="#recoil-js">
 </a>
 Recoil JS
</h2>
<h3>
 <a name="example-with-async-queries" href="#example-with-async-queries">
 </a>
 Example with async queries
</h3>
<h4>
 <a name="using-raw-userecoilvalueloadable-endraw-hook" href="#using-raw-userecoilvalueloadable-endraw-hook">
 </a>
 using <code>useRecoilValueLoadable</code> hook.
</h4>

This hook is intended to be used for reading the value of asynchronous selectors. This hook will implicitly subscribe the component to the given state.

This hooks returns a <code>Loadable</code> object for the current state with the following interface:

<ul>
<li>
state: Indicates the status of the selector. Possible values are <code>'hasValue'</code>, <code>'hasError'</code>, <code>'loading'</code>.</li>
<li>
contents: The value represented by this <code>Loadable</code>. If the state is <code>'hasValue'</code>, it is the actual value, if the state is <code>'hasError'</code> it is the Error object that was thrown, and if the state is <code>'loading'</code>, then it is a Promise of the value.</li>
</ul>

The example code below implements <code>useRecoilValueLoadable</code> hook from recoilJS using <a href="https://nextjs.org/">Next JS</a>, in a use-case when implementing private routes using HOC 


<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code>import { useRouter } from "next/router";
import React from "react";
import { useRecoilValueLoadable } from "recoil";
import getAuthUser from "../store/selectors/getAuthUser";

const withAuthConsumer = (WrappedComponent: any) =&gt; {
 return (props: any) =&gt; {
 const authUser = useRecoilValueLoadable(getAuthUser);
 const router = useRouter();

 // checks whether we are on client / browser or server.
 if (typeof window !== "undefined") {
 if (authUser.state == "loading") {
 return null;
 }

 if (
 authUser.state == "hasValue" &amp;&amp;
 authUser.contents?.user_type == "consumer"
 ) {
 return &lt;WrappedComponent {...props} /&gt;;
 } else if (
 authUser.state == "hasValue" &amp;&amp;
 authUser.contents?.user_type == null
 ) {
 router.push("/auth/login");
 return null;
 } else {
 router.push("/auth/login");
 return null;
 }
 }
 // If we are on server, return null
 return null;
 };
};

export default withAuthConsumer;
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



Check this <a href="https://recoiljs.org/docs/api-reference/core/useRecoilValueLoadable/">useRecoilValueLoadable</a> for more explanation.

<h2>
 <a name="html-to-jsx" href="#html-to-jsx">
 </a>
 Html to jsx
</h2>

<a href="https://htmltojsx.in/">https://htmltojsx.in/</a>

Simplicity & Aesthetics over Complexity
Life is too sweet to be loosing sleep over trying to understand how a library or framework works, as long as a solution or library is working and has long term support I'm okay with it

## Recoil JS
### Example with async queries
#### **using `useRecoilValueLoadable` hook.**
This hook is intended to be used for reading the value of asynchronous selectors. This hook will implicitly subscribe the component to the given state.

This hooks returns a `Loadable` object for the current state with the following interface:
* **state:** Indicates the status of the selector. Possible values are `'hasValue'`, `'hasError'`, `'loading'`.
* **contents:** The value represented by this `Loadable`. If the state is `'hasValue'`, it is the actual value, if the state is `'hasError'` it is the Error object that was thrown, and if the state is `'loading'`, then it is a Promise of the value.

The example code below implements `useRecoilValueLoadable` hook from recoilJS using [Next JS](https://nextjs.org/), in a use-case when implementing private routes using HOC

```js
import { useRouter } from "next/router";
import React from "react";
import { useRecoilValueLoadable } from "recoil";
import getAuthUser from "../store/selectors/getAuthUser";

const withAuthConsumer = (WrappedComponent: any) => {
 return (props: any) => {
 const authUser = useRecoilValueLoadable(getAuthUser);
 const router = useRouter();

 // checks whether we are on client / browser or server.
 if (typeof window !== "undefined") {
 if (authUser.state == "loading") {
 return null;
 }

 if (
 authUser.state == "hasValue" &&
 authUser.contents?.user_type == "consumer"
 ) {
 return <WrappedComponent {...props} />;
 } else if (
 authUser.state == "hasValue" &&
 authUser.contents?.user_type == null
 ) {
 router.push("/auth/login");
 return null;
 } else {
 router.push("/auth/login");
 return null;
 }
 }
 // If we are on server, return null
 return null;
 };
};

export default withAuthConsumer;
```
Check this [useRecoilValueLoadable](https://recoiljs.org/docs/api-reference/core/useRecoilValueLoadable/) for more explanation.

## Html to jsx
https://htmltojsx.in/

Simplicity &amp; Aesthetics over Complexity Life is too sweet to be loosing sleep over trying to...