Skip to content

Instantly share code, notes, and snippets.

View heron2014's full-sized avatar

Anita Czapla heron2014

  • London
View GitHub Profile
@heron2014
heron2014 / useEffect-key-takeaways.js
Last active December 29, 2020 01:54
Key takeaways for useEffect
useEffect(fn) // run function on every render
useEffect(fn, []) // run function only when the component is first rendered
useEffect(fn, [value]) //run function when component is first rendered and when the `value` changes
// Remember if you pass dependency(value) which is an object - React perform
// strict comparision using "===" of the first level properties and will not
// conduct comparisons deeper into the properties.
@heron2014
heron2014 / useEffect-componentWillUnmount.js
Created December 1, 2020 13:38
useEffect componentWillUnmount - clean up
// Class
componentWillUnmount() {
console.log('I am unmouting');
}
// Hooks
useEffect(() => {
return () => console.log('I am unmounting, run me to do any clean up');
}, [])
@heron2014
heron2014 / useEffect-componentDidUpdate.js
Created December 1, 2020 13:35
useEffect componentDidUpdate
// Class
componentDidUpdate(prevProps, prevState) {
console.log('Prev state', prevState); // Before update
console.log('New state', this.state); // After update
}
// Hooks
useEffect(() => {
// The big difference here is that useEffect doesn't provide previous state/prop value.
@heron2014
heron2014 / useEffect-componentDidMount.js
Created December 1, 2020 13:31
useEffect componentDidMount
// Class
componentDidMount() {
console.log('Run me only when the component is first rendered/mounted');
}
// Hooks
useEffect(() => {
console.log('Run this arrow function only when the component is first rendered/mounted');
}, [])
@heron2014
heron2014 / useEffect-every-render.js
Created December 1, 2020 13:28
useEffect - on every render
useEffect(() => {}) // run arrow function every time the component is rendered
@heron2014
heron2014 / react-native-maps-enable-google-maps-instructions.md
Last active May 21, 2024 07:25
Visual instructions how to enable Google Maps on IOS using react-native-maps

Visual instructions how to enable Google Maps on IOS using react-native-maps

UPDATE: Following instructions are now a year old. I have recently managed to upgrade react-native-maps from 0.17 to the latest version 0.21 with react-native 0.51 - if you want to follow my instruction scroll down to the end this doc! Hope that will work for you too!

This is for my personal use, things might not be correctly explained here. For the official docs please check https://github.com/airbnb/react-native-maps

Steps from scratch:

1.react-native init GoogleMapPlayground

@heron2014
heron2014 / getAllInheritedPropNames.js
Created December 7, 2016 18:06
Getting all inherited property names of an object
const getAllInheritedPropNames = (obj) => {
let props = [];
do {
props = props.concat(Object.getOwnPropertyNames(obj));
} while (obj = Object.getPrototypeOf(obj));
return props;
};
import React from "react";
import { render } from "react-dom";
const ParentComponent = React.createClass({
getDefaultProps: function() {
console.log("ParentComponent - getDefaultProps");
},
getInitialState: function() {
console.log("ParentComponent - getInitialState");
return { text: "" };
@heron2014
heron2014 / hapi-boom-json-api.js
Created July 22, 2016 16:16
hapi plugin to reformat boom errors to json-api
exports.register = function (plugin, options, done) {
plugin.ext('onPreResponse', function (request, reply) {
var response = request.response;
if (response.isBoom) {
var error = {
title: response.output.payload.error,
status: response.output.statusCode,
detail: response.output.payload.message