How to deal with Action function & Apex Command Button Together

I have seen many posts where I found newbies are struggling with issues when they call action function from apex:command button. 

I have some points to be considered: 
1. My first recommendation is to avoid calling action function from apex Command Button until unless you have specific requirement to validate some inputs in javascript before hitting the server. 

2. If you have to call action function from command button then please follow below points. 
     2.A) When you use action function and command button then you page gets submitted two times and it causes an issue of setting public properties (bound with Page like setters) to null value. 
     2.B) To resolve this issue use  "return false;" in your onclick event just after calling JS function or action function. 
    2.C) Please go through with below code to see how to do it. 

<apex:page Controller="myController">
<apex:form>
<apex:actionFunction action="{!SaveData}" name="SaveData" reRender="pbId" />
<script>
function Save() {                
SaveData();                                      
}
</script>
<apex:pageBlock id="pbId" >
<apex:commandButton value="Submit" onclick="Save(); return false;" rerender="pbId" />
</apex:form>
</apex:page>