DEV Community: a c sreedhar reddy

Represent pair data structure using functions.

a c sreedhar reddy — Sat, 16 Oct 2021 02:19:04 +0000

Pair

Pair is a data structure which is used to combine two values.

(1, 4)
("sreedhar", "pavan")

Javascript does not provide this data structure. So let us implement this.

Represent pairs in JS

Pairs can be represented using an object or an array

//Represent pair using object
function pair(a,b){
    return {first: a, second: b};
}
function first(p){
    return p.first;
}
function second(p){
  return p.second;
}

//use the pair
const p = pair(12, 13)

const f = first(p)
console.log(f) // logs 12

const s = second(p)
console.log(s) // logs 13

//Represent pair using array.
function pair(a, b) {
  return [a, b];
}
function first(p) {
  return p[0];
}
function second(p) {
  return p[1];
}

//use the pair
const p = pair(12, 13);

const f = first(p);
console.log(f); // logs 12

const s = second(p);
console.log(s); // logs 13

But is there a way to represent pair in terms of functions without using object or array?

Think for some time before you proceed.
.
.
.
Yes there is a way

Represent pair using functions

Consider our pair function returns a function.

function pair(a, b) {
  return (value) => (value === 0 ? a : b);
}

Now this returned function when called with 0 returns the first element and when called with 1 returns the second element.

so we can implement first and second functions as

function first(p) {
  return p(0);
}

function second(p) {
  return p(1);
}

Finally with these functions we can represent pair using functions.

function pair(a, b) {
  return (value) => (value === 0 ? a : b);
}
function first(p) {
  return p(0);
}

function second(p) {
  return p(1);
}

//use the pair
const p = pair(12, 13);

const f = first(p);
console.log(f); // logs 12

const s = second(p);
console.log(s); // logs 13

Conclusion

I would never implement pair using functions. But it was fun to realise that I can.
I found this in a section in SICP book.

Why make illegal states impossible to represent?

a c sreedhar reddy — Sat, 27 Feb 2021 20:06:04 +0000

This is a continuation to https://dev.to/acsreedharreddy/when-could-should-we-merge-two-states-3e60

React Component is a function that takes in props, state and returns the view for that particular state and props.

f(props,state) => view

So our component has to handle all the possible types of props and states.

Let us create a Post component:

function Post({ id }) {
  const [{ loading, error, data }, dispatch] = useReducer(reducer, {
    loading: true,
    error: null,
    data: null,
  });
  useEffect(/* Load the data */);

  return (
    <div>
      {loading && <Loading />}
      {error && <Error />}
      {data && <Body data={data} />}
    </div>
  );
}

We wanted the component to either render Loading or Error or Body component.

But the issue with this component is:

The Component would render both the Loading component and Data component when the state is {loading: true, data: "...", error: null}.

Why does this happen?

The total number of possible states for the above component are

2(loading true | false) * 2(data | null) * 2(error | null) = 8 states

Of these 8 states only three are valid states

{loading: true, data: null, error: null} when the data is loading.
{loading: false, data:{...}, error: null} when the data is loaded.
{loading: false, data: null, error: {...}} when there is an error.

When the state is anything other than the above three, our component renders an inconsistent View.

I could think of two ways to prevent invalid states:

Write code more carefully so that we would never have inconsistent states. But we would not be 100% sure.
Make illegal states impossible to represent so that this type of state {loading: true, data: {...}, error: null } is impossible to create.

How can we Make illegal states impossible to represent?

We can achieve this with the help of Sum Type in a type system.

type state = 
    |{type:"Loading"} 
    |{type:"Error",error:string}
    |{type:"Data",data:string}

It is called as an Union(TypeScript), Variant(ReScript).

So now the state could be one of the above three types. Then the total number of possible types of states come down to

1(Loading) + 1(Error) + 1(Data) = 3 states.

Since we have made illegal states impossible to represent, State will always be a valid one and we just have to create a React component which deals with three types of states.

The component becomes

type state = 
    |{type:"Loading"} 
    |{type:"Error",error:string}
    |{type:"Data",data:string}

function Post({ id }) {
  const [state, dispatch] = useReducer(reducer, {
    type: "Loading",
  });
  useEffect(/* Load the data */);

  switch (state.type) {
    case "Loading":
      return <Loading />;
    case "Error":
      return <Error />;
    case "Data":
      return <Data data={state.data} />;
  }
}

Here we reduced the possible states from 8 to 3. But in our real-world scenarios, the numbers would be much larger than these and by reducing the possible states we reduce the complexity of the component.

When could (should) we merge two states?

a c sreedhar reddy — Tue, 16 Feb 2021 18:19:25 +0000

If you look at the following gif when I tap on the likes button, you could see a jank where a No likes found screen is displayed, and then immediately likes are displayed.

I have seen this similar type of UX glitch in my project. The problem was with this piece of code.

function LikesScreen() {
  const [isLoading, setIsLoading] = useState(true);
  const [likes, setLikes] = useState([]);
  useEffect(() =>  {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/todos/1").then((likes) => {
      setIsLoading(false);
      setLikes(likes);
    });
  }, []);

  if (isLoading) return <Loading />;
  if (likes.length === 0) {
    return <EmptyLikes />;
  }
  return <Likes likes={likes} />;
}

In the above code initially, the isLoading state is true.

Loading screen is rendered.
Then the effect is triggered
A network request is made and the promise resolves with the likes data.

This is where the interesting thing happens.

React would not batch state updates triggered asynchronously i.e, in Promises, timeouts etc.

So setIsLoading(false) would trigger a re-render and React would render <EmptyLikes />

Then setLikes(likes) would trigger another re-render and React would render <Likes />.

So the setIsLoading ->Render -> setLikes-> Render is the root cause of the issue.

How can we fix this?

We can fix this by merging isLoading and likes states into a single state so that state updates are atomic.

function LikesScreen() {
  const [{ isLoading, likes }, setState] = useState({
    isLoading: true,
    likes: []
  });
  useEffect(() => {
    setState((state) => {
      return { ...state, isLoading: true };
    });
    fetch("https://jsonplaceholder.typicode.com/todos/1").then((likes) => {
      setState({ likes, isLoading: false });
    });
  }, []);
  if (isLoading) return <Loading />;
  if (likes.length === 0) {
    return <EmptyLikes />;
  }
  return <Likes likes={likes} />;
}

So when there are states which have the information about the same context then they could be merged so that the state updates become atomic.

This is a simple case but for complex cases, the state update logics might be more complex and would have been spread throughout the component.

In those cases, useReducer would be really helpful by colocating all of the state update logic.

Next thing

Even after all of this, there could still be a problem.

Consider the state contains 5 boolean fields. Then the total possible states would be 2 pow 5 = 32.

The component should handle all these possible 32 cases. Creating these type of components could be hard

So the solution is to make Illegal states impossible to represent about which I will be writing in the next article🤗

Connect to react-native server using ADB reverse.

a c sreedhar reddy — Thu, 07 Jan 2021 19:21:30 +0000

Add this connect script to your package.json.

{
...
"scripts": {
   ...
    "connect": "adb reverse tcp:8081 tcp:8081 && adb reverse tcp:8097 tcp:8097"
  }
}

When you connect your physical device while developing a react native app, sometimes you might remove the USB to use your phone.

Now to connect it back you would generally run npm run android which might take some time.

Instead, you could run npm run connect which would reverse the ports 8081 and 8087. This would take far less time when compared to npm run android.

And you can continue your development. 🙂