oaugusto256

Example of a Typescript function with ChangeEventHandler type:

const onChangeText: React.ChangeEventHandler<HTMLInputElement> = event => {
  setText(event.target.value);
};

oaugusto256

Code review articles to reference

Articles to improve general code review proof of "truth", increasing the knowledge and quality code ruler of the team. If you have a place to study and get reference to point places that can be better; All collegues will be benefited. The one, whos is writing the code review, will have place to check possible things to look up and, the other, who is getting the code review, will know how to get better and have a place to study and visualize what has been discussed.

• White space: https://dev.to/suckup_de/do-not-fear-the-white-space-in-your-code-39d0
• Magical values: https://kyleshevlin.com/what-are-magic-values
• Code comments: https://stackoverflow.blog/2021/12/23/best-practices-for-writing-code-comments/

oaugusto256

const getCurrentCharValue = (str, startIndex, endIndex) => {
  const currentValueToDecode = str.substring(startIndex, endIndex);
  const currentValueToDecodeInt = parseInt(currentValueToDecode);

  return String.fromCharCode(currentValueToDecodeInt);
}

const getCurrentIndexJump = (value) => {
  if (value === 32) {
    return 1;

oaugusto256

About me

Putting my energy to learn more about software development; trying day-by-day to be a better human; sharpening my soft skills and building strong relationships.

I faithfully believe that education, cooperation and technology can help the humanity reach its highest achievements.

Challenges

Check all my current made challenges below:

oaugusto256

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
  GLOBAL.originalXMLHttpRequest :
  GLOBAL.XMLHttpRequest;

// fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });

oaugusto256

List of great React tips

1. Standardise naming. onX for eventHandler props. handleX for the func.

2. Avoid use of anonymous functions that may cause unnecessary re-renders.

Because we are passing anonymous functions, React will always re-render since it receives a new anonymous function as a prop which it is unable to compare to the previous anonymous function (since they are both anonymous). On the other hand, passing in a reference to the method like onClick={this.handleClick} lets React know when nothing has changed so it does not unnecessarily re-render. However, the anonymous function is sometimes unavoidable as when we need to pass in an argument available only in the context: onClick={() => {this.handleClick(argHereOnly)}} .

3. Composition and componded components over passing everything by props.

oaugusto256

// Mock HTTP requests
import { users, departaments } from '../mock';

export const getUsers = async () => {
  return new Promise(resolve => setTimeout(() => {
    resolve(users);
  }, 2000));
};

oaugusto256

// Filter unique array
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

// Add element in an array at state
addElement = (event) => {
  this.setState(state => {
    const list = [...list, state.element];

    return {

oaugusto256

SeuComponente = () => <Bla />;

SeuComponente.navigationOptions = ({navigation}) => {
  headerStyle: {
    backgroundColor: navigation.getParam(corNoticia),
  },
}
  
export default SeuComponente;