Refs in React : All you need to know ! – Hacker Noon

Refs in React : All you need to know !



#reactJS #javascript #developer

  • borrowed from evening while looking into a popular react library, I came across ‘refs’ and even knowing it how it works i wasn’t quite convinced with my understanding so decided to dive more deeper into it and finally sharing my thoughts with you people.According to react docs , refs are used to get reference to a DOM(Document Object Model) node or an instance of a component in a React Application i.e. refs would return the node we are referencing .
  • But i would suggest using classes for use-case of this kind as its much better and also refs has its caveats which we would see soon.When it returns a DOM node or a component’s instance?If the ref points to a standard component (DOM node, such as input, select, div etc) then to retrieve the element; you just need to call this.refs.ref.If the ref points to a composite component (a custom component you have created yourself) you need to use the new ReactDOM module like so is the ref value first set ?
  • Don’t Inline refs callbacks: I used inline callbacks to show you why it is bad thing to doArrow and bind functions in a render() produce a performance hit by creating a new function on EVERY re-render.
  • It should be done something like thisAlso If the ref callback is defined as an inline function, it will get called twice during updates, first with null and then again with the DOM element.
  • ExampleReact Official DocsAs MyFunctionalComponent has no instances , above code won’t work as intended.BUT ref attribute will work inside a functional component as long as you refer to a DOM element or a class component:React Official DocsHope you now have a good understanding of refs along with it use-cases and caveats.

Last evening while looking into a popular react library, I came across ‘refs’ and even knowing it how it works i wasn’t quite convinced with my understanding so decided to dive more deeper into it…
Continue reading “Refs in React : All you need to know ! – Hacker Noon”

React Native — first impressions – Real Life Programming – Medium

React Native — first impressions  #react #softwaredevelopment #reactnative #reactjs

  • Right now QuotesKeeper is already in AppStore and we’ll be posting updated thoughts about React Native soon.Some time ago at DayOne.pl we started a project to build 3 apps with 3 devs in 30 days — the one month project.
  • Most of the knowledge you have about components, lifecycle, state, props, mixins, etc. can be used in your React Native project.
  • Just like you would do in regular React app.There are plenty of libraries ready to be used by your project if any native component is missing.
  • Also built-in React Native list component start scrolling very slow when you have so many elements.
  • You really need to test things out if you plan to work on large datasets.SummaryTo sum things up — would I use React Native in my next project?

First thoughts about React Native after more than a month of iOS app development. Good and bad sides of building your app with React Native.
Continue reading “React Native — first impressions – Real Life Programming – Medium”