DEV Community: Kuldeep Bora

Debouncing (lodash) with React

Kuldeep Bora — Wed, 01 Jul 2020 16:14:52 +0000

Scenario: Getting something done on input change is not efficient in scenario where that 'something' is to fetch data from an api or to call another prop function or state action.

Solution: One of the solution is to use debounce/throttle api. There are several libraries which allows us to do just that. Lodash is one of them.

import { debounce, throttle } from 'lodash';

Code: Functional component

const delayedHandleChange = debounce(eventData => someApiFunction(eventData), 500);

const handleChange = (e) => {
        let eventData = { id: e.id, target: e.target };
        delayedHandleChange(eventData);
    }

Above handleChange() function will be used in our react input component for onChange props.

For class component, we have to bind functions like so:

constructor(props) {
this.throttleHandleChange = debounce(this.throttleHandleChange.bind(this), 500);
this.handleChange = this.handleChange.bind(this);

}

throttleHandleChange(edata) {
   someApiFunction(edata);
}

handleChange(e) {
    let edata = { id: e.id, target: e.target }
    this.throttleHandleChange(edata)
};

Same as above, handleChange gets called on our input component.
This allows us to only call api function once user has stopped typing for 500ms or more.

Throttle api can be used in exact same way. Only difference is that throttle allows us to call api once every 500ms (above example) while typing.

Hope this helps. Thanks and happy coding. :)

React Todo App with Apollo client (local state)

Kuldeep Bora — Thu, 19 Mar 2020 14:01:32 +0000

I find Apollo official documentation hard to follow as it's quite lengthy and bit confusing to figure out the big picture at first. Luckily there are other articles/tutorials which are much better to follow. Below is my attempt to understand and write a classic Todo app with Apollo client.

Assuming that required dependencies are installed.

Step 1. Create Apollo client

First step is to initialize the apollo client which will take take of our local state and it's mutations.

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers
});

Cache is our local storage. Resolvers are our functions that will actually resolve the query we send to apollo. We will see them later. The client will also take 'link' as optional param for remote data fetching but we do not need it here.

Step 2. Initialize local state

cache.writeData({
  data: {
    todos: []
  }
});

Use cache.writeData to write data in local storage as initial value. This is same as setState = { todos: [] } or useState({todos: []}).

Step 3. Define queries.

import { gql } from "apollo-boost";

export const GET_TODOS = gql`
  {
    todos @client {
      id
      name
      completed
    }
  }
`;

export const ADD_TODO = gql`
  mutation addTodo($name: String!) {
    addTodo(name: $name) @client {
      name
    }
  }
`;

These are needed to get and add todo in local storage (cache). These will be used by resolver to get exact data we asked. Note that to add a todo, we just have to send the todo name.

Step 4. Provide resolvers.

export const resolvers = {
  Mutation: {
    addTodo: (_, todo, { cache }) => {
      const { todos } = cache.readQuery({ query: GET_TODOS });
      let new_todo = {
        id: RandomID(10),
        name: todo.name,
        completed: false,
        __typename: "todo"
      };
      cache.writeData({
        data: {
          todos: [...todos, new_todo]
        }
      });

      return new_todo;
    }
  }
};

Resolvers are needed to tell graphql what to do when called (via useMutation here). Note that I didn't provide resolver for read Todo. The apollo client will directly look in cache if a local resolver is not provided for the query.

Step 5. Use UseQuery() and UseMutation() to read and write data to local storage and display in UI

function App() {
  const [task, setTask] = useState("");
  const { loading, error, data } = useQuery(GET_TODOS);
  const [addTodo] = useMutation(ADD_TODO);

  if (loading) return <h2> Loading... </h2>;
  if (error) return <h2> ERROR...: {error} </h2>;
  return (
    <div className="App">
      <h1>TODOS:</h1>
      {data.todos.map(todo => (
        <li key={todo.id}> {todo.name} </li>
      ))}
      <input
        placeholder="add a Todo"
        onChange={e => setTask(e.target.value)}
        value={task}
      />
      <button
        onClick={() => {
          setTask("");
          addTodo({
            variables: {
              name: task
            }
          });
        }}
      >
        Add
      </button>
    </div>
  );
}

Final step is to read and write data from UI itself.

code link: https://codesandbox.io/s/react-apollo-todo-local-state-j4c7c

Note that we don't need the schema here because we are only using primitives (string) to read and write.

That's it for now. I am still in search for better articles and documentation for Apollo to understand it more. If anyone come across better articles, please do let me know. Thanks a lot. Happy learning.

P.S. Please do correct me if something is inaccurate or incomplete above.

React: Create component inside a component (?)

Kuldeep Bora — Mon, 17 Feb 2020 13:25:29 +0000

I recently observed one issue in my component rendering. Consider this code

const App = () => {
const [search, setSearch] = useState('');

const Users = ()=>  <UserList pattern={search}/>;

return (
    <div id="app" className="home-page">
      <Header />
      <WelcomeSlogan/>
      <Users/>
    </div>
  );
}

Here, the 'Users' component is re-rendering whole list whenever the search string changes. This is because in functional component, whole function body gets execute again (except hooks part) whenever local state (search) changes. What we want is only unmatched items to be removed from list. So the simple fix is to not create a component inside functional component.
Using

<UserList pattern={search}/>

directly inside return will fix our issue.

return (
    <div id="app" className="home-page">
      <Header />
      <WelcomeSlogan/>
      <UserList pattern={search}/>
    </div>
  );

So the take away - NEVER CREATE A COMPONENT INSIDE ANOTHER FUNCTION COMPONENT.

However, this is not true in case of react class components. Since only render() method gets executed when re-rendering, we can create other (functional) components inside a class component. Like below:

class App extends React.Component {
constructor(props) {
      super(props);
      this.state = {
          search: ''
      }
      ...
  }
getUserList() {...} // returns List based on this.state.search
getComponent() {...} //create component here. returns UI element(s)

render() {
  return(
   <div> 
     {getUserList() }
     <div> { getComponent() } </div>
   </div>)
}

This however works well. The getUserList component does not re-render whole list when search changes. Which is desired behavior. This might be because:

Functions are not part of class instance.
Only render function gets called when component re-render.

Hence, I think, IT's OK TO CREATE FUNCTIONAL COMPONENTS INSIDE A CLASS COMPONENT(?).

This was a good lesson for me and I can say I understand JS and React a bit better than before. (Feel free to add/correct me in comment section)

Thanks All.

Visualizing React-Redux

Kuldeep Bora — Wed, 12 Feb 2020 10:48:47 +0000

Hello All,
Based on the article of Valentino Gagliardi (https://dev.to/valentinogagliardi/react-redux-tutorial-for-beginners-learning-redux-in-2018-13hj), I created a visual representation of Redux and React-Redux flow. For me I was always going back and forth to code snippets when learning react-redux. I thought this might help a bit. Feel free to comment and correct me. Thanks.

REDUX SOLO:

And...
REACT-REDUX:

React's Tic-Tac-Toe using React Hooks

Kuldeep Bora — Fri, 07 Feb 2020 14:47:35 +0000

Hello All,
As I am learning react hooks, this is my take in changing react's tic-tac-toe game code to use hooks.

I will jump straight to code as the documentation in reactjs.org is one of the best I've ever seen. https://reactjs.org/tutorial/tutorial.html#what-are-we-building

Functions remains same as their class counterpart:

Square(props), Board(props) and calculateWinner(squares)

The "Game" component is changed to functional component and is using hooks now.


const Game = () => {
      const [history,setHistory] = React.useState([{ squares: Array(9).fill(null) }]);
      const [stepNumber, setStepNumber] = React.useState(0);
      const [xIsNext, setXIsNext] = React.useState(true);
      const [status, setStatus] = React.useState("");

      const handleClick = (i) => {
        const hist = history.slice(0, stepNumber + 1);
        const current = hist[hist.length - 1];
        const squares = current.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
          return;
        }
        squares[i] = xIsNext ? "X" : "O";

        setHistory(hist.concat([{ squares }]));
        setStepNumber(hist.length);
        setXIsNext(!xIsNext);
      }

      const jumpTo = (step) => {
        setStepNumber(step);
        setXIsNext((step % 2) === 0);
      }


      const moves = history.map((step, move) => {
        const desc = move ?
          'Go to move #' + move :
          'Go to game start';
        return (
          <li key={move}>
            <button onClick={() => jumpTo(move)}>{desc}</button>
          </li>
        );
      });

      let current = history[stepNumber]; 
      let winner = 0; 
      React.useEffect(()=> {
        current = history[stepNumber];
        winner = calculateWinner(current.squares);    

        if (winner) {
          setStatus("Winner: " + winner);
        } else {
          setStatus("Next player: " + (xIsNext ? "X" : "O"));
        }

      });

      return (
        <div className="game">
          <div className="game-board">
            <Board
              squares={current.squares}
              onClick={i => handleClick(i)}
            />
          </div>
          <div className="game-info">
            <div>{status}</div>
            <ol>{moves}</ol>
          </div>
        </div>
      );

    }

I am updating the status and calculating the winner in a useEffect hook as this will be called at every render (update).

The working code: https://codepen.io/kuldeep-bora/pen/QWbWPrY