A visual guide to React Native Performance: Issues and resolving Insights

A visual guide to #reactnative Performance: Issues and resolving Insights

  • A visual guide to React Native Performance: Issues and resolving InsightsFor anyone who is coming from Cordava/Ionic development background, React Native would blow your mind with its easy code sharing, UI advantages, and faster time to market.React Native not only decreases the burden of engineering(as Java/Objective is hard to master),…
  • It is no surprise that Garbage collector does it job, but, due to a bridge between the Native and React Native realm, most components go unnoticed.Credit: GithubEven simpler utility applications such as a hybrid camera app we tested was found to be leaking huge memory.Memory leaks are usually common with…
  • In the screenshot above, you can see that the app size was increased 4x times when it was built using React native.Note: Both of them had exactly the same features, still app size was 4x more in React native.App size drastically impacts — how an application renders its UI components, and allocate the…
  • Read here to see app navigation performance issues with react native and how you can improve them.Infinite scrolling in React NativeMediumLiterally!
  • With best practices, and some lesser known optimisation techniques, you can improve the performance.Aside from what we discussed above, there are so many other performance bottlenecks that you must know before deploying your application.If I had to list few other common issues, they would be:Animating images for different UI viewLack…

For anyone who is coming from Cordava/Ionic development background, React Native would blow your mind with its easy code sharing, UI advantages, and faster time to market. React Native not only…
Continue reading “A visual guide to React Native Performance: Issues and resolving Insights”

Redux Devtools for Dummies – tyler clark – Medium

Redux Devtools for Dummies  #react #development #testing #redux #javascript #reactjs

  • In my opinion, this is the most robust and easiest to set up.npm install –save redux-devtools-extensionimport { composeWithDevTools } from ‘redux-devtools-extension’; into the store file.Finally compose your store with the imported module:import { composeWithDevTools } from store = createStore(reducer, composeWithDevTools( // other store enhancers if any));I recommend using this option over the others because it helps avoid issues with isomorphic applications.
  • Check out the additional features you can add and remove to the console hereHere is how one would add in those customized features:import { composeWithDevTools } from composeEnhancers = composeWithDevTools({ // Specify custom devTools options});const store = createStore(reducer, /* preloadedState, */ composeEnhancers( // other store enhancers if any));Also, if you do not have enhancers/middleware in your application, there is a more straight forward approach:import { devToolsEnhancer } from store = createStore(reducer, /* preloadedState, */ devToolsEnhancer( // Specify custom devTools options));Notice that we are using devToolsEnhancer here rather than composerWithDevTools.
  • If you installed everything correctly in your store initialization, it will show you something like this:If there is an error in your set-up, including exceptions thrown from your code, you will see this:Let’s break down whats happening in each section of the dev tools.Left-Side Console ToolsThe left hand column of the dash is showing in real time the actions that are firing on the current page (as defined by the action creator types).
  • The skip will cross out the action and show you your app without that action.Right-Side Console ToolsThe four tabs at the top right are in my opinion the most helpful of the tools.DiffThe right side of the console has multiple options to see the state of the application and the relation of each action to the state.When an action is selected in the left hand side of the console, the Diff option will show only what that individual action changed in the state tree.ActionClicking on the Action tab will show the individual action type and any data it is carrying along to the reducers.In the example above, this action has a type features/FETCH_SUCCESS and also carries data, the requested features to the reducer.
  • Including all of the combined reducers and their corresponding data branches.The Raw tab shows the action creator in a code view.StateThe state tab shows the entire state tree at the time of the action selected in the left hand side of the console.TestBack to the upper tabs, there is a test option.

Do you take one look at the docs and just give up? Did you know that you can completely control the currently running application’s actions/state through these tools? The first step is the easiest to…
Continue reading “Redux Devtools for Dummies – tyler clark – Medium”