teleren/devto huggingface dataset:
State Management in Pure React with Hooks: useCallback and React.memo
Tags: react, beginners, webdev, tutorial
Published: 2020-04-19 06:16:16

Hello, everyone 👋, I hope you are doing great 😊.

So, today you are going to learn all the basic concepts of ``useCallback`` Hook in this article.

Before you start, there are some rules you need to follow to use Hooks 😟. Thankfully the React Team has provided an ESLint Plugin called [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) that enforce these rules when using Hooks 🤩.

##useCallback Hook
The ``useCallback`` Hook returns a memorized callback. 

The ``useCallback`` Hook takes two arguments. The first argument is a callback and the second argument an array of dependencies. The ``useCallback`` Hook returns a memorized version of the callback that only changes when if one of the dependencies changes.

The ``useCallback`` Hook is useful when passing the callbacks to optimize child components when they rely on reference equality to prevent unnecessary renders.

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1587213651/state-management-in-pure-react-with-hooks/lohwobx8ycjxj9gmluoi.png)

You can provide an empty array as the second argument to the ``useCallback`` function.
{% gist https://gist.github.com/bipinrajbhar/485431081c728317700f2bb62948e8a8.js %}

## React.memo Function
The ``React.memo`` work similarly to a functional component as ``pureComponent`` to the class component. The difference is that it will skip the rendering of the function component when current props are equal to the old ones.

The ``React.memo`` function that takes a functional component as an argument and returns a function component.

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1587213651/state-management-in-pure-react-with-hooks/wtrqy7dipa4wbwouc6hz.png)

By default, ``React.memo`` shallow compare complex objects in the props.

Primitive Type
{% gist https://gist.github.com/bipinrajbhar/31b9a565777880a1178a58480b97081e.js %}

Object Type
{% gist https://gist.github.com/bipinrajbhar/90f625985aada1cc87d2097d0bf1591c.js %}

**Example**
{% codesandbox uoi3n %}

In this example, we have fixed the problem that was occurred in the previous article.

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1587214891/state-management-in-pure-react-with-hooks/p5rlgmwt5pqsuqor5kmn.gif)

Before you end this article, I want to mention that you can not archive the same behaviour with the help of ``useState ``Hook because of the ``useState`` Hook returns new setter function on every render.

Now, you have learned all the basic concepts of ``useCallback`` Hook 🤘.

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on [Twitter](https://twitter.com/Bipin_1598) if you’d like to be notified about new articles and resources.
What are some features that every frontend developer should know how to implement?
Tags: discuss, javascript, career, webdev
Published: 2020-04-19 06:03:45

As the question suggests, what are some frontend features every frontend developer should know how to implement/optimize for, as a standard thing a frontend dev should know? A few things off the top of my head would be,

Working with APIs to

- Search
- Sort
- Filter

Optimizing by
- Throttling
- Debouncing
- Memoization 

What else?
Replicating World's First 9 Dollars Computer. You can also create one for you :)
Tags: linux, showdev, tutorial, android
Published: 2020-04-19 06:00:03

######This is reproduced from my ***'Lockdown Articles Series'*** for my 2 Year Son. The First phase of lockdown in India was from 25 March 2020 to 14 April 2020. For 21 days, I had plenty of time. So I decided to write something for my son. Ideas, concepts, codes.... whatever... I like I was sharing with him every day because I believe my social web posts on my Facebook will remain for 20-30 years and that time he will see my posts.

I was quite impressed in 2015 about a new open source project CHIP (by nextthingco). A computer's CPU in 9 dollars. They designed this 'chip' and kept its design open-source until everything was deleted by team before going bankrupt.

Later, raspberry pi emerges as an alternative in the market. But their pricing is above 15 USD.

I don't want to reinvent the wheel, but I was exploring about the possibility of a computer (CPU) in less than 15 USD.

After 2016,  we all witnessed the replacement of TV Satellite boxes with Android TV boxes. The reason was the cheap availability of high-speed Internet data. Android TV Boxes are priced from 7 USD. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wu3hhgzoz0so8zuw3gk5.png)

***The layman's story:***

What I was trying to achieve? A Linux desktop mounted over 'Android', handy to carry and less than 15 USD. The selection criteria for achieving this (in this little budget) was an Android Setup box having these three features 1 GB Ram+ Android Play store+ Android latest version.

***How to***
(1) Download an App: Termux from google playstore.
(2) Run these Shell Commands :

`Wget https://raw.githubusercontent.com/Manishfoodtechs/ubuntuonandroid.sh/master/Ubuntuonandroid.sh`

`sh Ubuntuonandroid.sh`

This shell command is written & aggregated by me. If you get an error at any stage, please run command one by one. You need VNC to connect to your desktop.

To know more about VNC please follow my this guide :
https://dev.to/manishfoodtechs/your-complete-online-desktop-hosted-on-server-in-just-5-00-4la5

One can also install an opencloud or nextcloud on this small CPU.

The layman's Learning:
1. CHIP team idea was 'good' but they later become bankrupt. The idea never dies.
2. The bad thing they did by removing CHIP design from the Internet.
3. You can accidentally discover alternatives.
React Fragments
Published: 2020-04-19 05:54:31

When dealing with React function or class components, everything that is returned needs to be in a wrapper element.  This can be most any element tag, most commonly a <div> tag.  As soon as you start nesting components, the <div> elements start stacking up.
```
import React from 'react';
import './App.css';

function OneSuchComponent() {
  return (
    <div>
      ONE SUCH COMPONENT
    </div>
  )
}

function AnotherComponent() {
  return(
    <div>
      THIS IS ANOTHER
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        header
      </header>
      <main>
        <OneSuchComponent /><br/>
        <AnotherComponent />
      </main>
    </div>
  );
}
export default App;
```
Would give us the following HTML
```
<div id="root">
  <div class="App">
    <header class="App-header">header</header>
    <main>
      <div>ONE SUCH COMPONENT</div><br>
      <div>THIS IS ANOTHER</div>
    </main>
  </div>
</div>
```
If we did not want the wrapper tags included in the rendered HTML, React provides "Fragments" which would allow you to seamlessly inject components return values without the wrappers.

By including the Fragments...
```
import React, { Fragment } from 'react'
```
...then replacing the wrapper elements with <Fragment> tags...
```
function OneSuchComponent() {
  return (
    <Fragment>
      ONE SUCH COMPONENT
    </Fragment>
  )
}

function AnotherComponent() {
  return(
    <Fragment>
      THIS IS ANOTHER
    </Fragment>
  )
}
```
...the corresponding HTML generated by the components no longer shows a wrapper element.
```
<div id="root">
  <div class="App">
    <header class="App-header">header</header>
    <main>
      ONE SUCH COMPONENT<br>
      THIS IS ANOTHER
    </main>
  </div>
</div>
```
Introducing Flipper Redux plugin
Tags: redux, reactnative, flipper, showdev
Published: 2020-04-19 05:39:15

[Flipper](https://fbflipper.com/) is a platform for debugging iOS, Android and React Native apps. It is a companion for mobile app development on iOS and Android with a bunch of useful tools including a log viewer, interactive layout inspector, and network inspector. Starting from React Native 0.62, flipper support is [enabled by default](https://reactnative.dev/blog/2020/03/26/version-0.62). 

After some time using Flipper, a friend of mine, @plwai, and I decided to create a redux plugin for React Native for Flipper since we are using [redux toolkit](https://redux-toolkit.js.org/) in our project.

{% github https://github.com/jk-gan/redux-flipper %}

{% github https://github.com/jk-gan/flipper-plugin-redux-debugger %}

`redux-flipper` is a redux middleware to send the information into Flipper. `flipper-plugin-redux-debugger` is a flipper plugin for Flipper Desktop Client to display all the redux logs. They are designed to make it easier to debug redux states using Flipper.

### Feature: 
The plugin provides some features out of the box:
- Action logs
- States comparison for each action
- Manual redux action dispatcher

![Plugin layout](https://dev-to-uploads.s3.amazonaws.com/i/xaq9210pfsgpwuupqt4h.png)<figcaption>the plugin layout</figcaption>

Previously we have to use multiple tools to debug React Native app. Android studio for Android native part, Xcode for iOS native part and browser debugger for redux. With this plugin and Flipper, developers can now debug their apps on a single platform!

If you find this plugin helping in your development workflow, please share it with others.

Let me know what do you think about this article through comments. Any suggestions and feedbacks are welcome! Thanks!


*Cover photo credits to Markus Winkler on Unsplash*
Generate unique color code in javascript
Tags: javascript, codequality, react, codenewbie
Published: 2020-04-19 05:33:49

*Photo by Nicole Wolf on Unsplash*

The title sounds interesting, right? I mean it was for me to create or validate into local/server machine's directories. 

Beforehand, let me welcome you in the series of **Javascript Useful Snippets**, here I'll be sharing some shortcodes and function which can help you to make your development faster and efficient. So, if you haven't read my previous posts check it out a [profile](https://dev.to/rajnishkatharotiya) now else please stay tuned to the end (I'm sure you will get something 😋) ... 

Have you ever needed to create a directory from your app and before creation had to validate if this same-named directory exists or not? if yes, please share it via a comment on how you achieved it? I've one function defined to process this task. **checkAndCreateDir()** it takes a directory name as parameter, check if it's already created else create a new one. Let me share a snippet:-

```
const fs = require('fs');
const checkAndCreateDir = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
```

That's it, just two lines to get the job done. Here I've used fs *(file system - this module provides an API for interacting with the file system in a manner closely modeled around standard POSIX functions.)* to validate and create folder respectively with functions existsSync() and mkdirSync() from fs. In return, it's executed existsSync() with a directory name, if it'll return false then only mkdirSynce() will execute otherwise it'll return undefined.

Use is just as simple as it looks:
```
checkAndCreateDir("MyDirectory")
```

*Note:- While running this function, or executing any function with the parameter value. We should make sure it's not empty. Here, before we pass "dir" to existsSync() or mkdirSync() we should check it has some value in it. and to check that I've one other snippet to introduce which allow us to check any type of data to validate if's empty or not, here it is...*

```
const isEmpty = val => val == null || !(Object.keys(val) || val).length;
```

I found this snippet to useful for me, so thought to share it with you too. I hope you got something from here. if yes, please hit follow button 😅 (Thanks for that - btw I share every day something [here](https://dev.to/rajnishkatharotiya) please stay tuned to learn something new ).
Git on IBMi 
Tags: git, IBMi, RPGLE, as400
Published: 2020-04-19 05:18:05

## Simple guide for getting git on powerSystem

### What is git ? 

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Git feature that really makes it stand apart from nearly every other SCM out there is its branching model. Git link: https://git-scm.com/

Git runs in PASE in powersystem and it can be used for version control by keeping sources in IFS. 

### How to setup git on you machine. 
 - You need yum package manager first. 
   - [Easiest step](https://bitbucket.org/ibmi/opensource/src/master/docs/yum/#markdown-header-online-install-instructions-without-acs-open-source-management-tool) 
   - [Details here](https://bitbucket.org/ibmi/opensource/src/master/docs/yum/) 

 - `CALL QP2TERM` on your 5250 command line. This will open a shell. 
 - Run the following commands to set path
   ```bash  
    PATH=/QOpenSys/pkgs/bin:$PATH && export PATH
   ```
 - Basic yum command [click here](https://bitbucket.org/ibmi/opensource/src/master/docs/yum/#markdown-header-yum-cheat-sheet)
 - For git use this 
```bash 
     yum install git 
``` 

***Now Git is installed on your system***

### Get started with Git on IBMi 

Actually Git runs in PASE environment in IBMi on powerSystem so you need to work with IFS files to use git. 

#### Steps to git 
*  `call qp2term`
*  `pwd`to check present working directory 
*  if you dont want to use the pwd for git use **cd /path/to/direcory
*  `mkdir gitrepo` IFS is case sensitive  
*  `cd gitrepo`
*  `git init` - initialize cd as git repo
*  `touch mypgm.rpgle` creates a new file mypgm.rpgle
*  Make some changes in mypgm.rpgle and save those changes.
*  `git add mypgm.rpgle` - add mypgm.rpgle to staging area(where changes will be tracked)
*  `git commit -m "my comments for code changes "` - moves mypgm.rpgle to repository. 
![this is the flow](https://upload.wikimedia.org/wikipedia/commons/2/29/Git_data_flow.png "git work flow")     

 > I have covered just the getting started part, there is more to git and how you can benefit from it.
Clear Add VS Lookup Move
Tags: csharp, xamarin
Published: 2020-04-19 04:59:54

![](https://raw.githubusercontent.com/jaysonragasa/jaraimages/master/ClearAddVsLookupMove/clearddvslookupmove.gif)
[GitHub Repo](https://github.com/jaysonragasa/ClearAddVsLookupMove)

# Clear Add VS Lookup Move  
It's always in my thought but barely implemented that when just refreshing the list to show updated data or just sorting things. It's always better to move the items around instead of calling `.Clear()` then refilling the list. I implemented this before, way back 2015 when I was working on a Kiosk WPF app and in administration mode there are some lists that shows real time updates.. it's a pain watching the list clearing and then repopulating when something changes in the background. It's ugly, it's slow, and you can't click on it.  
  
I am working on a simple project called [COVID19 Tracker](https://github.com/jaysonragasa/COVID19Tracker) were I need to sort different columns of COVID19 cases -- Country, Confirmed Case, Total Recoveries, Total Deaths. When I click on the column headers, I noticed this very slow performance when **repopulating** the ListView and it even got slower when the hot reload triggers the refresh of the entire page.  
  
Look at the duration here  
![](https://raw.githubusercontent.com/jaysonragasa/jaraimages/master/ClearAddVsLookupMove/clearddvslookupmove_gotworst.gif)
  
The ListView is bound on an `ObservableCollection<T>` and has 221 items in it. We're not paging for the mean time. I also have a `List<T>` where I keep a backup for sorting purposes. So comparing the result of usinig lazy reloading were we use `.Clear()` and `.Add(T)` to refresh the items in the list against just moving the items `T LookupItem()` and `.Move(int index)`. The result is interesting.  
  
* Lazy loading took **100 to 130 +-** millisecond to complete EVERYTIME I sort the list
* Moving took only **20 to 30 +-** millisecond. That's a huge difference in performance. Codes may be a bit longer with this one plus the look up is using `.Where`. I think it may perform even more faster if I used the traditional loop.  
  
This duration will be different of course based on your device. In my device, the lazy load took 300+- ms and using Move took only around 60+-ms.

## iOS List Animation
Here's the difference in iOS.  
![](https://raw.githubusercontent.com/jaysonragasa/jaraimages/master/ClearAddVsLookupMove/clearddvslookupmove_atios.gif)  
Left simulator is "filling" the list whilst the right is "switching". Please bear with the responses when activing the simulator. I am only using a virtual OS of the macOS High Sierra version 10.13.6
]
Run tests effortlessly in Node.js and browsers with Meteor.
Tags: meteor, webdev, javascript
Published: 2020-04-19 04:20:12

Testing tools like Jest run our tests in Node.js with a _fake_ set of browser APIs. This is not idea because we can't guarantee that our code runs properly in real browser with real browser APIs.

Fake APIs are often missing features, for example certain CSS and WebGL APIs. When this happens, we feel out of luck.

### Enter Meteor!

> You don't need to be making a Meteor app to use Meteor as a tool for running tests; more details below.

Here's how to run tests in Node.js _and_ browsers, so that test code runs against _real_ APIs and we can be more confident that our code runs in our target environments.

Create a new Node.js/JavaScript/HTML/CSS-powered [Meteor](https://www.meteor.com) app, then run tests both on the serverside and clientside.

First, set up a new Meteor.js app:

```sh
meteor create my-app
cd my-app
npm install
```

This sets up a simple default Meteor web app with a button that increments a counter when we click it. Follow the [Meteor tutorials](https://www.meteor.com/tutorials) to learn more on what we can do with Meteor.

In this new Meteor app see the `tests/main.js` file for an example of test code that uses [Mocha's](https://mochajs.org) `decribe` and `it` syntax for describing test cases. 

### Let's run tests!

Now that we have a Meteor app set up, run tests in Node.js (serverside):

```sh
npm test
```

To run client-side tests in a browser (clientside), run

```sh
npm run test-app
```

and then point a browser to http://localhost:3000. It's that simple!

### And the best part?

When we run `npm run test-app`, the tests and the app run in _watch mode_. Any time we modify code and save, tests automatically re-run both on the serverside and the clientside.

The browser automatically refreshes and re-runs the clientside tests, which leads to an awesome developer experience!

> Tip: The CSS for the clientside test output [can be configured](https://github.com/meteortesting/meteor-mocha#run-client-tests-in-any-browser-manually) in order to place the output anywhere in the viewport to make development more convenient.

### Continuous integration? No problem!

We can automate our JavaScript/HTML/CSS tests in Node.js _and_ browser environments with ease!

In continuous integration environments, just use the `TEST_BROWSER_DRIVER` env variable to specify a browser for the test runner to use headlessly! More details on [how to run tests in each browser](https://github.com/meteortesting/meteor-mocha/blob/master/README.md#npm-scripts).

### Test _anything_ with Meteor

Here's an idea!

Even if we aren't making a Meteor application, we can simply make an empty Meteor app configuration in our project (f.e. an Express.js app with custom UI), and use Meteor to run our non-Meteor tests!

I'll leave this as an exercise for anyone reading, but feel free to ask any questions.

And that's it! As simple as that!
How to avoid Insecure Binder Configuration in JAVA
Tags: security, java, todayilearned
Published: 2020-04-19 03:31:48


# What is API ABUSE? 😥
An API is a contract between a caller and a callee. The most common forms of API abuse are caused by the caller failing to honor its end of this contract. For example, if a program fails to call chdir() after calling chroot(), it violates the contract that specifies how to change the active root directory in a secure fashion. 
Another good example of library abuse is expecting the callee to return trustworthy DNS information to the caller. In this case, the caller abuses the callee API by making certain assumptions about its behavior (that the return value can be used for authentication purposes). One can also violate the caller-callee contract from the other side. For example, if a coder subclasses SecureRandom and returns a non-random value, the contract is violated.

# Abstract 🙄
The framework binder used for binding the HTTP request parameters to the model class has not been explicitly configured to allow, or disallow certain attributes

# Explanation 🤓
To ease development and increase productivity, most modern frameworks allow an object to be automatically instantiated and populated with the HTTP request parameters whose names match an attribute of the class to be bound. Automatic instantiation and population of objects speeds up development, but can lead to serious problems if implemented without caution. 

Any attribute in the bound classes, or nested classes, will be automatically bound to the HTTP request parameters. Therefore, malicious users will be able to assign a value to any attribute in bound or nested classes, even if they are not exposed to the client through web forms or API contracts.

# The vulnerability 😩
```java
public class MyClasss implements Serializable {
  // some logic
}
```

# The solution 😊

Jackson provides an annotation that can be used on class level (JsonIgnoreProperties).

So simple, just add `@JsonIgnoreProperties(ignoreUnknown = true)` before the class.

Add the following to the top of your class (not to individual methods):
```java
@JsonIgnoreProperties(ignoreUnknown = true)
public class MyClasss implements Serializable {
  // some logic
}
```
👋